/* ==========================================================================
   Videos Grid — 5-tile staggered grid (3 top, 2 bottom)
   ========================================================================== */

.sec-videos-grid {
	background: var(--clr-white);
	padding: 120px 0 0;
}

.sec-videos-grid__inner {
	max-width: 1920px;
	margin: 0 auto;
	padding: 0 240px;
}

.sec-videos-grid__header {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	margin-bottom: 60px;
}

.sec-videos-grid__eyebrow {
	color: var(--clr-primary);
}

.sec-videos-grid__heading {
	font-size: var(--fs-h2);
	line-height:1.12;
	color: var(--clr-black);
}

.sec-videos-grid__tiles {
	display: flex;
    gap: 20px;
    flex-wrap: wrap;
	justify-content: center;
}

.sec-videos-grid__tile {
	    position: relative;
    display: block;
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.3s ease;
    box-shadow: 0px 24px 40px 0px #00000026;
    width: calc(33.33% - 20px);
	min-height: 329px;
	cursor: pointer;
}
.sec-videos-grid__tile:focus-visible {
	outline: 2px solid var(--clr-primary, #078FD6);
	outline-offset: 3px;
}
.sec-videos-grid__tile-play svg {
    fill: #078FD6;
    color: #078FD6;
}
.sec-videos-grid__tile:hover { transform: translateY(-4px); }

.sec-videos-grid__tile-thumb {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.sec-videos-grid__tile-play {
	position: absolute;
	right: 14px;
	bottom: 14px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--clr-white);
	transition: all 0.3s ease;
}

.sec-videos-grid__tile:hover .sec-videos-grid__tile-play {
	transform: scale(1.06);
}
.sec-videos-grid__tile:before {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55.02%, #000000 100%);
    content: '';
    inset: 0;
    position: absolute;
}
.sec-videos-grid__footer,.sec-before-after__footer {
    position: relative;
}

.sec-videos-grid__footer:before,.sec-before-after__footer:before {
    content: '';
    width: 1px;
    bottom: 0;
    height: 74px;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
    background: #272727;
}
.sec-videos-grid__tile-caption {
	position: absolute;
	left: 14px;
	bottom: 14px;
	color: var(--clr-white);
	font-family: var(--font-body);
	font-size: var(--fs-lg);
	max-width: 70%;
	line-height: 1.25;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}

/* Staggered bottom row: indent tiles 4 & 5 (next to last 2) ----------- */



.sec-videos-grid__footer { text-align: center; padding: 50px 0 120px; }

@media (max-width: 1366px) { 
.sec-videos-grid__tile {
    width: calc(33.33% - 24px);
    min-height: 270px;
}
}
@media (max-width: 1200px) { 
.sec-videos-grid__tile {
    width: calc(50% - 10px);
    min-height: 250px;
}
}
@media (max-width: 1279px) {
	.sec-videos-grid__inner { padding: 0 60px; }
}

@media (max-width: 1024px) {
	.sec-videos-grid          { padding-top: 80px; }
	.sec-videos-grid__tile--4 { grid-column: auto; margin-left: 0; }
	.sec-videos-grid__tile--5 { grid-column: auto; margin-left: 0; }
	.sec-videos-grid__header {margin-bottom: 40px;}
	.sec-videos-grid__footer {
    text-align: center;
    padding: 30px 0 80px;
}
.sec-videos-grid__footer:before, .sec-before-after__footer:before {
    height: 50px;
}

}

@media (max-width: 767px) {
	.sec-videos-grid__inner   { padding: 0 24px; }
	.sec-videos-grid__footer  { padding: 30px 0 60px; }
	    .sec-videos-grid {
        padding-top: 50px;
    }
	    .sec-videos-grid__tile {
        width: 100%;
		}
}
@media (max-width: 640px) { 
	.sec-videos-grid__header {
    margin-bottom: 20px;
	}
	    .sec-videos-grid {
        padding-top: 40px;
    }
    .sec-videos-grid__footer:before, .sec-before-after__footer:before {
        height: 30px;
    }
}