/* ==========================================
   Reports Section
========================================== */

.reports {
	position: relative;
	background: var(--wisconsin-grey);
	padding-top: 58px;
	padding-bottom: 100px;
}

.reports::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: var(--white);
	z-index: 0;
	height: 160px;
}

.reports .container {
	z-index: 2;
	position: relative;
}

.reports .reports-card,
.reports-card {
	background: var(--primary-bgcolor);
	min-height: 300px;
	padding: 16px;
}

.reports-card-inner {
	border: 2px solid var(--aquatic-teal);
	min-height: 100%;
	position: relative;
	overflow: hidden;
	transition:
		border-color 0.6s ease,
		background-color 0.6s ease;
}

.reports-card-inner:hover {
	border-color:var(--primary-color) ;
}

.reports-card-inner:hover .osep-outline-btn {
	background-color: var(--coastal-teal);
	color: var(--primary-color);
}

/* ==========================
   Default Layer
========================== */

.reports-card-body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: relative;
	transition: transform 0.6s ease;
	height: 300px;
	padding: 16px;
}
.reports-card-body .visually-hidden{
	color: #fff;
}
.reports .text-md,
.reports-card-body p {
	color: var(--white);
	margin: 0;
	width: 100%;
}
.reports-card-body p{
	font-size: 15px;
}

/* ==========================
   Hover / Keyboard States
========================== */

.reports-card:hover {
	transition: transform 0.35s ease;
}

.reports-card:focus-within {
	outline: 3px solid var(--coastal-teal);
	outline-offset: 4px;
}

.reports-card .osep-outline-btn {
	bottom: 0px;
	transform: translate(0px, -16px);
	position: absolute;
	width: auto;
	left: 16px;
	right: 16px;
	font-size: 14px;
	padding-left: 10px;
	padding-right: 10px;
}
.back-top:focus-visible{
	box-shadow: unset;
	outline: 3px solid var(--aquatic-teal);
}
.reports-card-inner {
    position: relative;
    overflow: hidden;
    /* border: 2px solid rgba(0, 196, 255, .2);  */
}

/* Animated Border */
.reports-card-inner::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 2px solid var(--aquatic-teal);
    clip-path: inset(0 0 100% 0); /* Hide border initially */
    transition: clip-path .8s ease;
    pointer-events: none;
}

/* Draw border from top to bottom */
.reports-card:hover .reports-card-inner::before {
    clip-path: inset(0 0 0 0);
}
/* ======================
   Min-width: 1200px
====================== */

@media (min-width: 1200px) {
	.reports-card-body p {
		opacity: 1;
		visibility: hidden;
		max-height: 0;
		overflow: hidden;
		transform: translateY(10px);
		display: block;
	}
	.reports-card-body:focus-within{
		justify-content: flex-start;
	}
	.reports-card-inner:hover .reports-card-body p,
.reports-card-inner:focus-within .reports-card-body p {
    visibility: visible;
    max-height: 300px;
    transform: translateY(0);
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 10px;

    /* Firefox */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.55) transparent;
}

/* Chrome, Edge, Safari */
.reports-card-body p::-webkit-scrollbar {
    width: 4px;
}

.reports-card-body p::-webkit-scrollbar-track {
    background: transparent;
}

.reports-card-body p::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.55);
    border-radius: 10px;
}

.reports-card-body p::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.8);
}

	.reports-card-inner:hover .reports-card-body {
		justify-content: flex-start;
	}

	.reports-card-body {
		opacity: 1;
		transform: translateY(0);
	}

	.reports-card-inner:hover .text-md,
	.reports-card-inner:focus-within .text-md {
		opacity: 0;
		transform: translateY(-10px);
		height: 0;
	}
}
@media (max-width: 1399.98px) {
.reports-card .osep-outline-btn {
    font-size: 13px;
}
}
/* ======================
   Max-width: 1199.98px
====================== */

@media (max-width: 1199.98px) {
	.reports .reports-card,
	.reports-card {
		min-height: 250px;
	}
	.reports {
    padding-bottom: 60px;
}
	.reports-card-body{
		align-items:flex-start;
	}
	.reports-card-body .text-md {
		margin-bottom: 16px;
	}

	.reports-card-body {
		justify-content: flex-start;
		height: auto;
	}
	.reports-card .osep-outline-btn {
        font-size: 13px;
        position: relative;
        transform: translate(0px, 0px);
        left: 0;
        right: 0;
        bottom: 0px;
    }
	.reports-card-body p {
    padding-bottom: 20px;
}
}

@media (max-width: 991.98px) {
	.reports .row.g-4{
		    margin-left: -25px;
    margin-right: -25px;
	}
}
/* ======================
   Max-width: 575.98px
====================== */

@media (max-width: 575.98px) {
	.reports-card {
		min-height: 340px;
	}
	    .reports-card-body {
        height: auto;
        align-items: flex-start;
    }
	    .reports .reports-card, .reports-card {
        min-height: auto;
    }
	.reports-card .osep-outline-btn {
    bottom: 0px;
    transform: translate(0px, 0px);
    position: relative;
    width: auto;
    left: 0;
    right: 0;
    margin-top: 15px;
}
.reports .row.g-4{
		    margin-left: -10px;
    margin-right: -10px;
	}
}