/* ===== Gallery Layout ===== */

.media-section {
 padding: 3rem 1rem 4rem;
 background: #020617; /* match your site's dark tone */
 color: #f9fafb;
}

.media-inner {
 max-width: 1120px;
 margin: 0 auto;
}

/* Header */
.media-header {
 margin-bottom: 2.25rem;
 text-align: center;
}

.media-header h2 {
 font-size: clamp(2rem, 3vw, 2.4rem);
 font-weight: 800;
 text-transform: uppercase;
 letter-spacing: 0.04em;
 margin: 0 0 0.75rem;
}

.media-header p {
 margin: 0 auto;
 max-width: 560px;
 color: #9ca3af;
 font-size: 0.98rem;
}

/* Grid: big video left + smaller curled images right */
.media-grid {
 display: grid;
 grid-template-columns: minmax(0, 2.1fr) minmax(0, 1.3fr);
 gap: 1.5rem;
 align-items: stretch;
}

/* Cards */
.media-card {
 background: #020617;
 border-radius: 18px;
 border: 1px solid rgba(148, 163, 184, 0.45);
 overflow: visible;
 display: flex;
 flex-direction: column;
 box-shadow: 0 14px 35px rgba(15, 23, 42, 0.7);
 transition:
 transform 0.18s ease-out,
 box-shadow 0.18s ease-out,
 border-color 0.18s ease-out;
}

/* Featured video column – as tall as the stack of images */
.media-card--featured {
 grid-row: 1 / span 3;
}

/* Hover effect */
.media-card:hover {
 transform: translateY(-3px);
 box-shadow: 0 18px 45px rgba(15, 23, 42, 0.9);
 border-color: rgba(148, 163, 184, 0.8);
}

/* Media area */
.media-thumb {
 position: relative;
 overflow: hidden;
 background: #020617;
}

/* Video (featured) – wide, not curled as much (you can change if you want) */
.media-card--featured .media-thumb {
 aspect-ratio: 16 / 9;
 border-radius: 18px;
}

/* Right-side images – smaller and more “curled” */
.media-card:not(.media-card--featured) .media-thumb {
 aspect-ratio: 4 / 3; /* shorter than 16:9 */
 max-height: 220px;
 border-radius: 24px; /* curl amount */
}

/* Actual media sizes */
.media-thumb video,
.media-thumb img,
.media-thumb iframe {
 width: 100%;
 height: 100%;
 display: block;
 border: 0;
 object-fit: cover;
}

/* Slight overlay on images only (not video) */
.media-card:not(.media-card--featured) .media-thumb::after {
 content: "";
 position: absolute;
 inset: 0;
 background: radial-gradient(circle at center, transparent 0, rgba(0, 0, 0, 0.3) 95%);
 pointer-events: none;
}

/* Optional captions under each item */
.media-body {
 padding: 0.8rem 1rem 1rem;
}

.media-body h3 {
 font-size: 1.02rem;
 margin: 0 0 0.3rem;
}

.media-body p {
 margin: 0;
 font-size: 0.9rem;
 color: #9ca3af;
}

/* ===== Responsive ===== */

@media (max-width: 900px) {
 .media-grid {
 grid-template-columns: minmax(0, 1fr);
 }

 .media-card--featured {
 grid-row: auto;
 order: -1; /* video goes on top on mobile */
 }
}

@media (max-width: 600px) {
 .media-section {
 padding: 2.5rem 0.75rem 3rem;
 }

 .media-card {
 border-radius: 16px;
 }

 .media-card--featured .media-thumb,
 .media-card:not(.media-card--featured) .media-thumb {
 border-radius: 18px;
 }
}