/* === media.css — shared styles for the Media section pages === */

@font-face {
    font-family: "Neue Haas Grotesk Text Pro";
    src: url("/dist/fonts/NHaasGroteskTXPro-Rg.ttf") format("truetype");
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
}

.page-media {
    --nav-h: 75px;
    background: #f2f2f2;
    color: #000;
    font-family: "Neue Haas Grotesk Text Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.page-media #navbar { opacity: 1; transform: none; }
.page-media #site-footer { background: #021c25; }

/* Fluid: scale the fixed 1440 design to fill the viewport edge-to-edge */
.media-scale {
    width: 1440px;
    margin: 0 auto;
    zoom: calc(100vw / 1440px);
}
.media-stage img { max-width: none; }
.media-stage {
    position: relative;
    width: 1440px;
    margin: 0 auto;
    background: #f2f2f2;
    overflow: hidden;
}

/* ── Hero ─────────────────────────────────────────────────── */
.md-hero { position: absolute; top: 0; left: 0; width: 1440px; height: 600px; overflow: hidden; background: #021c25; }
.md-hero__bg { position: absolute; left: -7px; top: -46px; width: 1454px; height: 831px; object-fit: cover; object-position: 50% 50%; }
.md-hero__overlay { position: absolute; inset: 0; width: 1440px; height: 600px; background: #000; opacity: 0.2; }
.md-hero__title { position: absolute; left: 61px; top: 330px; margin: 0; font-size: 80px; line-height: 60px; font-weight: 700; text-transform: uppercase; color: #fff; text-shadow: 4px 4px 10px rgba(0, 0, 0, 0.25); }
.md-hero__swipe { position: absolute; left: 1328px; top: 488px; width: 52px; display: flex; flex-direction: column; align-items: center; gap: 6px; color: #fff; font-size: 18px; line-height: 16px; }
.md-hero__swipe svg { display: none; }
.md-hero__swipe::before { content: ""; width: 21px; height: 40px; flex: 0 0 40px; background: url("/dist/images/common/hero-swipe.svg") center / 21px 40px no-repeat; }

/* ── Tab bar ──────────────────────────────────────────────── */
.md-tabs { position: absolute; left: 0; top: 600px; width: 1440px; height: 50px; background: transparent; display: flex; justify-content: center; align-items: stretch; }
.md-tabs::before { content: ""; position: absolute; inset: 0; background: #93e4dd; pointer-events: none; }
.md-tabs__inner { position: relative; z-index: 1; display: flex; align-items: stretch; gap: 3px; }
.md-tab { position: relative; display: flex; align-items: center; padding: 0 50px; font-size: 24px; line-height: 32px; font-weight: 400; color: #000; }
.md-tab.is-active { font-weight: 700; color: #074158; }
.md-tab.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: #074158; }
.md-tabs__sep { width: 1px; height: 20px; background: #000; align-self: center; }

/* ── Filter dropdown ──────────────────────────────────────── */
.md-filter { position: absolute; top: 700px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 19px; white-space: nowrap; }
.md-filter__label { margin: 0; font-size: 20px; line-height: 25px; font-weight: 400; color: #0e3c4f; }
.md-filter__select {
    appearance: none; width: 320px; height: 43px; box-sizing: border-box;
    border: 1px solid #000; border-radius: 10px; background: #f2f2f2;
    padding: 0 56px 0 10px; font-family: inherit; font-size: 16px; color: rgba(2, 28, 37, 0.6); cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='11' viewBox='0 0 22 11' fill='none'%3E%3Cpath d='M1 1l10 9 10-9' stroke='%23627277' stroke-width='1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 17px center;
}

/* ── Card grid ────────────────────────────────────────────── */
.md-grid {
    position: absolute; left: 60px; top: 783px;
    display: grid; grid-template-columns: repeat(4, 318px); gap: 30px 16px;
}
.md-card {
    position: relative; width: 318px; height: 296px;
    background: linear-gradient(135deg, rgba(80,121,137,0.25) 0%, rgba(7,65,88,0.25) 100%), #ffffff; border-radius: 10px;
    padding: 18px 14px; box-sizing: border-box; overflow: hidden;
    transition: transform 0.25s ease;
}
.md-card:hover { transform: scale(1.04); z-index: 2; }
.md-card__date { margin: 0; font-size: 16px; line-height: 24px; font-weight: 400; color: #161616; }
.md-card__title { margin: 8px 0 0; font-size: 20px; line-height: 24px; font-weight: 700; color: #161616; }
/* The card is a fixed 318x296 with Read More pinned at the bottom, so the excerpt only has
   room for 2 lines once the longest title (5 lines: the Jharsuguda school one) is above it —
   which is what the design's own placeholder ran to. Real copy varies in length, so clamp it
   rather than letting it run under the button; the full text stays in the markup. */
.md-card__excerpt {
    margin: 8px 0 0; font-size: 16px; line-height: 24px; font-weight: 400; color: #161616;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.md-card__more {
    position: absolute; left: 14px; bottom: 18px; width: 207px; height: 40px;
    display: grid; place-items: center; border-radius: 30px; background: transparent;
    border: 1.5px solid #021c25; box-sizing: border-box;
    font-size: 18px; font-weight: 700; color: #021c25;
}
.md-card__more:hover { background: rgba(2, 28, 37, 0.06); }

/* ── Image-card variants (Media Coverages, Blogs) ─────────── */
.md-grid--cov,
.md-grid--press { top: 793px; gap: 20px 16px; }
.md-grid--blog { top: 700px; left: 60px; grid-template-columns: repeat(4, 318px); gap: 30px 23px; }
.md-card--cov { height: 487px; padding: 0; }
.md-card--press { height: 487px; padding: 0; }
.md-card--blog { height: 404px; padding: 0; }
.md-card__pub { position: absolute; left: 14px; top: 18px; width: 250px; margin: 0; font-size: 16px; line-height: 24px; font-weight: 300; color: #161616; white-space: pre-line; }
.md-card--press .md-card__date { position: absolute; left: 14px; top: 18px; width: 290px; margin: 0; }
.md-card--press .md-card__title { position: absolute; left: 14px; top: 50px; width: 290px; margin: 0; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.md-card--cov .md-card__title { position: absolute; left: 14px; top: 73px; width: 290px; margin: 0; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.md-card--blog .md-card__title { position: absolute; left: 14px; top: 18px; width: 290px; margin: 0; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.md-cardimg { position: absolute; left: 14px; width: 290px; height: 175px; overflow: hidden; background: #074158; display: grid; place-items: center; }
.md-card--press .md-cardimg { top: 179px; }
.md-card--cov .md-cardimg { top: 179px; }
.md-card--blog .md-cardimg { top: 148px; }
.md-card--blog:nth-child(n+2):nth-child(-n+4) .md-cardimg { top: 155px; }
.md-card--blog:nth-child(n+2):nth-child(-n+4) .md-card__title { top: 15px; }
.md-cardimg__logo { width: 168px; height: auto; opacity: 0.92; }
.md-cardimg__tile { width: 100%; height: 100%; object-fit: cover; display: block; }
.md-card__source { position: absolute; left: 14px; top: 374px; width: 289px; margin: 0; font-size: 16px; line-height: 24px; font-weight: 400; color: #161616; white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.md-card--press .md-card__excerpt { position: absolute; left: 14px; top: 374px; width: 289px; margin: 0; }
.md-card--press .md-card__more { left: 14px; bottom: 18px; font-size: 16px; color: #000; }
.md-card--cov .md-card__more { left: 14px; bottom: 18px; font-size: 16px; color: #000; }
.md-card--blog .md-card__more { left: 50%; transform: translateX(-50%); bottom: 21px; font-size: 16px; color: #000; }
.md-card--blog:nth-child(n+2):nth-child(-n+4) .md-card__more { bottom: 14px; }
.md-load-more { position: absolute; left: 0; width: 1440px; display: flex; justify-content: center; }
.md-load-more button { width: 207px; height: 40px; border: 1.5px solid #074158; border-radius: 30px; background: #074158; color: #f2f2f2; font: inherit; font-size: 18px; font-weight: 700; text-transform: uppercase; cursor: pointer; transition: background 0.2s, border-color 0.2s; }
.md-load-more button:hover { background: #021c25; border-color: #021c25; }
/* ── Media Contact ────────────────────────────────────────── */
.mc-rail { position: absolute; top: 840px; width: 2.5px; height: 373px; background: #507989; }
.mc-swoosh { position: absolute; top: 1096px; width: 64px; height: 50px; }
.mc-banner { position: absolute; top: 1144px; width: 399px; height: 71px; background: #507989; border-radius: 10px; overflow: hidden; transform: translateZ(0); backface-visibility: hidden; }
.mc-avatar { position: absolute; top: 750px; width: 200px; height: 200px; border-radius: 50%; background: #507989; }
.mc-photo { position: absolute; left: 14px; top: 14px; width: 172px; height: 172px; border-radius: 50%; background: #fff; overflow: hidden; }
.mc-photo img { position: absolute; max-width: none; }
.mc--radhika .mc-photo img { left: -29px; top: -30px; width: 231px; height: 246px; }
.mc--paramita .mc-photo img { left: -33px; top: -2px; width: 239px; height: 239px; }
.mc-linkedin { position: absolute; top: 812px; width: 62px; height: 56px; }
.mc-linkedin img { display: block; width: 100%; height: 100%; }
.mc-name { position: absolute; top: 962px; margin: 0; font-size: 30px; line-height: 36px; font-weight: 500; color: #074158; }
.mc-role { position: absolute; top: 1004px; margin: 0; font-size: 24px; line-height: 32px; font-weight: 400; color: #000; white-space: pre-line; }
.mc-email { position: absolute; top: 1155px; width: 372px; height: 50px; border-radius: 25px; overflow: hidden; transform: translateZ(0); backface-visibility: hidden; background: #f2f2f2; display: flex; align-items: center; padding: 0 25px; box-sizing: border-box; }
.mc-email a { font-size: 24px; line-height: 32px; color: #000; text-decoration: underline; }
.mc--radhika .mc-rail { left: 257px; } .mc--radhika .mc-swoosh { left: 250px; } .mc--radhika .mc-avatar { left: 256px; } .mc--radhika .mc-linkedin { left: 456px; } .mc--radhika .mc-name { left: 293px; } .mc--radhika .mc-role { left: 293px; width: 392px; } .mc--radhika .mc-banner { left: 257px; } .mc--radhika .mc-email { left: 270px; }
.mc--paramita .mc-rail { left: 786px; } .mc--paramita .mc-swoosh { left: 779px; } .mc--paramita .mc-avatar { left: 785px; } .mc--paramita .mc-linkedin { left: 985px; } .mc--paramita .mc-name { left: 822px; } .mc--paramita .mc-role { left: 822px; width: 363px; } .mc--paramita .mc-banner { left: 786px; } .mc--paramita .mc-email { left: 799px; }

/* ── Mobile (phone) layout ────────────────────────────────── */
@media (max-width: 767px) {
    .media-scale { zoom: 1 !important; width: auto; }
    .media-stage { width: auto; height: auto !important; margin: 0 auto 24px; overflow: visible; }
    .media-stage img { max-width: 100%; }
    /* the hub page ships its grid/filter with [hidden]; desktop
       display rules would otherwise resurrect them once the stage unclips */
    .media-stage [hidden] { display: none !important; }

    /* hero */
    .md-hero { position: relative; width: auto; height: 800px; }
    .md-hero__bg { left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
    .md-hero__overlay { width: 100%; height: 100%; }
    .md-hero__title { left: 16px; right: 16px; top: auto; bottom: 40px; font-size: 40px; line-height: 40px; }
    .md-hero__swipe { left: auto; right: 16px; top: auto; bottom: 24px; font-size: 14px; }

    /* tab bar — wraps into two centered rows */
    .md-tabs { position: relative; top: 0; left: 0; width: auto; height: auto; padding: 4px 8px; box-sizing: border-box; }
    .md-tabs__inner { flex-wrap: wrap; justify-content: center; align-items: center; }
    .md-tab { padding: 10px 12px; font-size: 15px; line-height: 20px; white-space: nowrap; }
    .md-tabs__sep { height: 14px; }

    /* filter */
    .md-filter { position: static; transform: none; flex-direction: column; align-items: flex-start; gap: 8px; margin: 24px 16px 0; white-space: normal; }
    .md-filter__label { font-size: 16px; line-height: 22px; }
    .md-filter__select { width: 100%; }

    /* card grids — single column, cards grow with content */
    .md-grid { position: static; grid-template-columns: 1fr; gap: 16px; margin: 24px 16px 0; }
    .md-card { width: auto; height: auto; padding: 18px 14px; }
    .md-card__more { position: static; margin-top: 14px; }
    .md-card__pub { position: static; width: auto; }
    .md-card--press .md-card__date { position: static; width: auto; }
    .md-card--press .md-card__title { position: static; width: auto; margin-top: 8px; }
    .md-card--press .md-card__excerpt { position: static; width: auto; margin-top: 12px; }
    .md-card--cov .md-card__title { position: static; width: auto; margin-top: 8px; }
    .md-card--blog .md-card__title { position: static; width: auto; }
    .md-cardimg { position: static; width: 100%; height: 175px; margin-top: 12px; }
    .md-card--press .md-card__more { position: static; margin: 14px auto 0; }
    .md-card__source { position: static; width: auto; margin-top: 12px; }
    .md-card--cov .md-card__more { position: static; margin-top: 14px; }
    .md-card--blog .md-card__more { position: static; transform: none; margin: 14px auto 0; }
    .md-load-more { position: static; width: auto; margin: 24px 16px 24px; }

    /* media contact — centered stacked card */
    .mc-card { position: relative; height: 440px; margin: 36px 16px 0; }
    .mc--paramita { margin-bottom: 44px; }
    .mc-card .mc-rail, .mc-card .mc-swoosh { display: none; } /* decorative rail composition tuned to the 1440 columns */
    .mc-card .mc-avatar { left: 50%; top: 0; margin-left: -100px; }
    .mc-photo img { max-width: none; }
    .mc-card .mc-linkedin { left: 50%; top: 62px; margin-left: 100px; }
    .mc-card .mc-name { left: 0; top: 214px; width: 100%; text-align: center; }
    .mc-card .mc-role { left: 16px; right: 16px; top: 258px; width: auto; text-align: center; font-size: 16px; line-height: 24px; }
    .mc-card .mc-banner { left: 0; right: 0; top: 368px; width: auto; }
    .mc-card .mc-email { left: 13px; right: 13px; top: 379px; width: auto; justify-content: center; }
    .mc-email a { font-size: 16px; line-height: 24px; }
}

/* ── Full-bleed hero past the 16" cap ───────────────────────────────────── */
@media (min-width: 1729px) {
    .media-stage { overflow: visible; }
    .md-hero { left: var(--bleed-left); width: var(--bleed-w); }
    /* bg/overlay sit inside the already-broken-out hero, so they fill from its
       own left edge (left:0) — NOT another bleed-left, which double-shifts them. */
    .md-hero__bg { left: 0; width: var(--bleed-w); }
    .md-hero__overlay { left: 0; width: var(--bleed-w); }
    .md-hero__title { left: calc(61px + var(--bleed-shift)); }
    .md-hero__swipe { left: calc(1328px + var(--bleed-shift)); }
    .md-tabs::before { left: var(--bleed-left); right: auto; width: var(--bleed-w); }
}