/* ==========================================================================
   Magazine Detail Page
   Sections: tokens · font · banner · hero · cover story · related content ·
             full cover story page · related magazines · focus/motion · responsive
   NOTE: @import must stay the first statement in the stylesheet. If Inter is
   already loaded site-wide (e.g. a <link> in <head>), delete this line.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ---------- Tokens ---------- */
:root {
    --mag-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --mag-ink: #102c50;          /* headings, dark panels */
    --mag-text: #50657b;         /* body copy */
    --mag-muted: #64809d;        /* labels, meta */
    --mag-primary: #1f6fbd;      /* buttons, links */
    --mag-primary-dark: #155898;
    --mag-bright: #2273e1;
    --mag-accent: #4fa8e6;       /* highlight on dark backgrounds */
    --mag-deep: #0a1f3c;         /* hero background */
    --mag-line: #dce7f2;         /* hairlines, card borders */
    --mag-line-strong: #c7d8e9;
    --mag-bg: #f4f7fb;
    --mag-placeholder: #e9eef5;
    --mag-wrap: 1240px;
    --mag-gutter: clamp(16px, 3vw, 32px);
}

/* ---------- Inter everywhere (icon elements excluded so icon fonts keep working) ---------- */
:is(.magazine-feature-banner, .magazine-detail-layout, .magazine-cover-story, .magazine-related-content,
    .cover-story-page, .related-magazines-section, .digital-link-btn),
:is(.magazine-feature-banner, .magazine-detail-layout, .magazine-cover-story, .magazine-related-content,
    .cover-story-page, .related-magazines-section, .digital-link-btn)
:is(h1, h2, h3, h4, p, a, span, strong, li):not(i, [class*="icon"], [class*="fa-"]) {
    font-family: var(--mag-font);
    -webkit-font-smoothing: antialiased;
}

/* ---------- Shared container ---------- */
.magazine-detail-layout, .magazine-cover-story, .magazine-related-content {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--mag-wrap);
    margin-inline: auto;
    padding-inline: var(--mag-gutter);
}

/* ---------- Shared image wrappers ---------- */
.cover-story-image, .magazine-content-image, .related-magazine-cover, .cover-story-related-image {
    position: relative;
    overflow: hidden;
    background: var(--mag-placeholder);
}
.cover-story-image img, .magazine-content-image img, .related-magazine-cover img, .cover-story-related-image img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---------- Shared primary buttons ---------- */
.cover-story-back-button, .related-magazines-view-all {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 22px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
.cover-story-back-button, .related-magazines-view-all { background: var(--mag-primary); color: #fff; }
.cover-story-back-button:hover, .related-magazines-view-all:hover { background: var(--mag-primary-dark); color: #fff; }

/* ---------- Feature strip (full-width CTA) ---------- */
.magazine-feature-banner { display: flex; width: 100%; margin: 0; }
.magazine-feature-link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    overflow: hidden;
    width: 100%;
    padding: clamp(10px, 1.6vw, 16px) var(--mag-gutter);
    background: linear-gradient(90deg, #1f6fbd, #2273e1, #4fa8e6, #2273e1, #1f6fbd) 0 50% / 300% 100%;
    animation: magazineFeatureGradientShift 8s linear infinite;
    color: #fff;
    font-size: clamp(12px, 1.2vw, 14px);
    font-weight: 700;
    letter-spacing: 0.12em;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    transition: opacity 0.2s ease;
}
.magazine-feature-link:hover { color: #fff; opacity: 0.92; }
.magazine-feature-link::after {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.32), transparent);
    animation: magazineFeatureShimmer 5s ease-in-out infinite;
    pointer-events: none;
}
@keyframes magazineFeatureGradientShift { to { background-position: 200% 50%; } }
@keyframes magazineFeatureShimmer {
    0% { left: -60%; }
    55%, 100% { left: 130%; }
}

/* ---------- Hero: dark full-bleed band, text left / cover right ----------
   HEIGHT REDUCED: smaller padding-block/gap, narrower cover column,
   shorter cover aspect-ratio, tighter type + spacing throughout. */
.magazine-detail-page { background: var(--mag-bg); }

.magazine-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(220px, 26vw, 338px);
    gap: clamp(20px, 3vw, 40px);
    align-items: center;
    margin-block: 0;
    padding-block: clamp(14px, 2vw, 28px);
    background: linear-gradient(90deg, var(--mag-deep) 0%, #12356a 70%, var(--mag-deep) 100%);
    box-shadow: 0 0 0 100vmax var(--mag-deep);   /* extends the band edge-to-edge without HTML changes */
    clip-path: inset(0 -100vmax);
    color: #fff;
}
.magazine-detail-cover { order: 2; display: flex; justify-content: center; }

/* Real cover art is 2480 x 3508px (~0.707:1). The card's aspect-ratio matches
   that exactly so the full cover is always visible — no cropping, no gaps. */

.magazine-cover-card {
    display: block;
    width: 100%;
    max-width: 338px;
    aspect-ratio: 2480 / 3508;
    overflow: hidden;
    background: var(--mag-deep);
    border: 1px solid var(--mag-accent);
    border-radius: 4px;
    cursor: pointer;
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.magazine-cover-card:hover,
.magazine-cover-card:focus-visible {
    border-color: #fff;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
    transform: translateY(-3px);
}
.magazine-cover-card img { display: block; width: 100%; height: 100%; object-fit: contain; }
.digital-link-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: calc(100% - 24px);
    margin: 12px auto;
    padding: 10px 14px;
    background: var(--admin-accent, #c0392b);
    color: #fff;
    text-align: center;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}
.digital-link-btn:hover { background: #a93226; color: #fff; }

.magazine-detail-content { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.magazine-detail-label {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    overflow: hidden;
    margin-bottom: 14px;
    padding: 8px 16px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--mag-accent);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.magazine-detail-label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.magazine-detail-label::after {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 50%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    animation: magazineLabelSweep 3.5s ease-in-out infinite;
    pointer-events: none;
}
@keyframes magazineLabelSweep {
    0% { left: -60%; }
    60%, 100% { left: 130%; }
}
.magazine-detail-content h1 {
    max-width: 780px;
    margin: 0 0 12px;
    color: #fff;
    font-size: clamp(26px, 3.4vw, 42px);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.03em;
}
.magazine-description {
    width: min(100%, 780px);
    max-width: 780px;
}
.magazine-description h3 { margin: 0 0 6px; color: #fff; font-size: 14px; font-weight: 600; }

.magazine-description p {
    margin: 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: clamp(14px, 1.1vw, 16px);
    line-height: 1.55;
}
.magazine-detail-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.magazine-read-btn, .magazine-back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 22px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1.2;
    text-decoration: none;
    text-transform: uppercase;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
.magazine-read-btn {
    background: var(--mag-accent);
    border-color: var(--mag-accent);
    color: var(--mag-deep);
    transform-origin: center;
    animation: magazineReadBtnAttract 4.5s ease-in-out infinite;
}
.magazine-read-btn:hover {
    background: #7dbdee;
    border-color: #7dbdee;
    color: var(--mag-deep);
    animation-play-state: paused;
}
.magazine-back-btn { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.28); color: #fff; }
.magazine-back-btn:hover { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.5); color: #fff; }
@keyframes magazineReadBtnAttract {
    0%, 85%, 100% { transform: scale(1) rotate(0deg); }
    88% { transform: scale(1.04) rotate(-1deg); }
    91% { transform: scale(1.04) rotate(1deg); }
    94% { transform: scale(1.02) rotate(-1deg); }
    97% { transform: scale(1.02) rotate(1deg); }
}

/* Metadata: sits under the CTAs as a spec row */
.magazine-meta-grid {
    order: 1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 8px;
    box-sizing: border-box;
    width: 70%;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.magazine-meta-item { padding: 10px 14px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 4px; }
.magazine-meta-label { display: block; margin-bottom: 4px; color: rgba(255, 255, 255, 0.55); font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.magazine-meta-value { display: block; color: #fff; font-size: 14px; font-weight: 600; }

/* ---------- Section headings (cover story + related content) ---------- */
.magazine-cover-story .section-heading, .magazine-content-section .section-heading {
    margin: 0 0 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--mag-line-strong);
}
.magazine-cover-story .section-heading h2, .magazine-content-section .section-heading h2 {
    margin: 0;
    color: var(--mag-ink);
    font-size: clamp(22px, 2.4vw, 30px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

/* ---------- Cover story (split panel) ---------- */
.magazine-cover-story { margin-block: 56px 0; }
.magazine-cover-story-container {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    overflow: hidden;
    border-radius: 6px;
}
.cover-story-image { min-height: 300px; }
.cover-story-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    box-sizing: border-box;
    padding: clamp(24px, 4vw, 44px);
    background: var(--mag-ink);
    color: #fff;
}
.cover-story-label { display: none; }
.cover-story-content h2 {
    margin: 0 0 12px;
    color: #fff;
    font-size: clamp(22px, 2.4vw, 32px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
}
.cover-story-content p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 15px;
    line-height: 1.65;
}
.cover-story-read-more {
    margin-top: 20px;
    padding-bottom: 2px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: border-color 0.2s ease;
}
.cover-story-read-more:hover { color: #fff; border-color: #fff; }

/* ---------- Related content (list) ---------- */
.magazine-related-content { margin-block: 56px 72px; }
.magazine-related-container::before {
    content: "RELATED CONTENT";
    display: block;
    margin-bottom: 6px;
    color: var(--mag-muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
}
.magazine-content-section .section-heading span { display: none; }
.magazine-content-section { margin-bottom: 40px; }
.magazine-content-grid { display: flex; flex-direction: column; gap: 12px; }
.magazine-content-card {
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--mag-line);
    border-radius: 6px;
    transition: border-color 0.2s ease;
}
.magazine-content-card:hover { border-color: var(--mag-primary); }
.magazine-content-card a {
    display: grid;
    grid-template-columns: clamp(110px, 28%, 300px) minmax(0, 1fr);
    color: inherit;
    text-decoration: none;
}
.magazine-content-image { min-height: clamp(96px, 14vw, 160px); }
.magazine-content-body { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: clamp(14px, 2.4vw, 24px) clamp(14px, 2.6vw, 28px); }
.magazine-content-body h3 {
    margin: 0 0 8px;
    color: var(--mag-ink);
    font-size: clamp(16px, 1.8vw, 22px);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.015em;
    transition: color 0.2s ease;
}
.magazine-content-card:hover .magazine-content-body h3 { color: var(--mag-primary); }
.magazine-content-body p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0 0 12px;
    color: var(--mag-text);
    font-size: clamp(13px, 1.3vw, 15px);
    line-height: 1.55;
}
.magazine-content-body .read-more { width: fit-content; color: var(--mag-primary); font-size: 13px; font-weight: 600; }

/* ---------- Full cover story page ---------- */
.cover-story-page { padding: clamp(28px, 5vw, 56px) clamp(14px, 3vw, 24px) clamp(44px, 7vw, 80px); background: #fff; }
.cover-story-page-container { max-width: var(--mag-wrap); margin: 0 auto; }
.cover-story-page-header { margin-bottom: clamp(24px, 4vw, 44px); text-align: center; }
.cover-story-page-title {
    margin: 0;
    color: var(--mag-ink);
    font-size: clamp(28px, 3.6vw, 44px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.025em;
}
.cover-story-main-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(32px, 5vw, 56px); align-items: start; }
.cover-story-main-content { min-width: 0; }
.cover-story-page-image {
    display: flex;
    align-items: center;
    justify-content: center;
    height: clamp(260px, 52vw, 640px);
    margin-bottom: 28px;
    overflow: hidden;
    background: var(--mag-bg);
    border-radius: 6px;
}
.cover-story-page-image img { display: block; width: 100%; height: 100%; object-fit: contain; }
.cover-story-page-content p { margin: 0; color: #33475b; font-size: clamp(15px, 1.3vw, 17px); line-height: 1.8; white-space: pre-line; }
.cover-story-sidebar-title { margin: 0 0 20px; color: var(--mag-ink); font-size: 20px; font-weight: 700; letter-spacing: -0.015em; }
.cover-story-related-list { display: flex; flex-direction: column; gap: 18px; }
.cover-story-related-item { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: start; color: inherit; text-decoration: none; }
.cover-story-related-image { width: 96px; height: 78px; border-radius: 4px; }
.cover-story-related-content { min-width: 0; }
.cover-story-related-content h3 { margin: 0; color: var(--mag-ink); font-size: 15px; font-weight: 600; line-height: 1.45; transition: color 0.2s ease; }
.cover-story-related-item:hover .cover-story-related-content h3 { color: var(--mag-primary); }
.cover-story-bottom-action { display: flex; justify-content: center; margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--mag-line); }

/* ---------- Related magazines (card grid) ---------- */
.related-magazines-section {
    box-sizing: border-box;
    width: min(100% - 2 * var(--mag-gutter), var(--mag-wrap) - 2 * var(--mag-gutter));
    margin: 0 auto 80px;
    padding: 36px clamp(16px, 3vw, 32px) 40px;
    background: #fff;
    border: 1px solid var(--mag-line);
    border-radius: 8px;
}
.related-magazines-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.related-magazines-label { display: block; margin-bottom: 6px; color: var(--mag-muted); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.related-magazines-header h2 { margin: 0; color: var(--mag-ink); font-size: clamp(24px, 2.5vw, 32px); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; }
.related-magazines-header h2 span { white-space: nowrap; }
.related-magazines-view-all { flex-shrink: 0; padding: 12px 20px; font-size: 13px; }
.related-magazines-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 22px; }
.related-magazine-card {
    display: block;
    min-width: 0;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--mag-line);
    border-radius: 6px;
    color: inherit;
    text-decoration: none;
    transition: border-color 0.2s ease;
}
.related-magazine-card:hover { border-color: var(--mag-primary); color: inherit; }
.related-magazine-cover { aspect-ratio: 3 / 4; }
.related-magazine-info { padding: 16px 18px 18px; box-sizing: border-box; }
.related-magazine-region { display: block; margin-bottom: 6px; color: var(--mag-primary); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.related-magazine-info h3 { margin: 0 0 12px; color: var(--mag-ink); font-size: 18px; font-weight: 700; line-height: 1.3; letter-spacing: -0.015em; transition: color 0.2s ease; }
.related-magazine-card:hover .related-magazine-info h3 { color: var(--mag-primary); }
.related-magazine-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--mag-muted); font-size: 12px; line-height: 1.4; }
.related-magazine-meta span { position: relative; }
.related-magazine-meta span + span::before { content: ""; position: absolute; left: -8px; top: 50%; width: 3px; height: 3px; border-radius: 50%; background: #9fb1c4; transform: translateY(-50%); }

/* ---------- Keyboard focus + reduced motion ---------- */
:is(.magazine-feature-link, .magazine-read-btn, .magazine-back-btn, .digital-link-btn, .cover-story-read-more,
    .cover-story-back-button, .related-magazines-view-all, .magazine-content-card a, .related-magazine-card,
    .cover-story-related-item):focus-visible { outline: 2px solid var(--mag-bright); outline-offset: 3px; }
.magazine-detail-layout :focus-visible { outline-color: var(--mag-accent); }
@media (prefers-reduced-motion: reduce) {
    .magazine-feature-link,
    .magazine-feature-link::after,
    .magazine-detail-label::after,
    .magazine-read-btn { animation: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    .cover-story-main-layout { grid-template-columns: 1fr; }
    .cover-story-related-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
}
@media (max-width: 700px) {
    .magazine-detail-layout { grid-template-columns: 1fr; gap: 28px; padding-block: clamp(24px, 5vw, 36px); }
    .magazine-cover-card { max-width: 220px; margin: 0 auto; }
    .magazine-meta-grid { width: 100%; }
    .magazine-cover-story-container { grid-template-columns: 1fr; }
    .cover-story-image { min-height: 0; aspect-ratio: 16 / 9; }
    .magazine-cover-story, .magazine-related-content { margin-top: 40px; }
    .magazine-related-content { margin-bottom: 48px; }
}
@media (max-width: 560px) {
    .magazine-detail-label { padding: 7px 14px; font-size: 10px; letter-spacing: 0.12em; }
    .magazine-detail-actions { flex-direction: column; align-items: stretch; width: 100%; }
    .related-magazines-header { flex-direction: column; align-items: flex-start; gap: 16px; }
    .related-magazines-header h2 span { white-space: normal; }
    .related-magazines-view-all { width: 100%; }
    .related-magazines-grid { grid-template-columns: 1fr; gap: 14px; }
    .related-magazine-card { display: grid; grid-template-columns: 110px minmax(0, 1fr); }
    .related-magazine-info { display: flex; flex-direction: column; justify-content: center; padding: 14px; }
    .related-magazine-info h3 { margin-bottom: 8px; font-size: 16px; }
    .cover-story-back-button { width: 100%; max-width: 280px; }
}