/* =========================================================================
   Aid Via Action — Phase 2 page-scoped styles
   These extend main.css (do NOT duplicate its tokens/components). Loaded per
   page via {% block extra_head %}. Cleanup note: these could be folded into
   main.css later — kept separate to avoid a merge conflict with the parallel
   agent editing main.css during Phase 2.
   ========================================================================= */

/* --- Centered page heading (Research / Donors / Contact / AVA 5K …) ------ */
.page-heading { text-align: center; margin-bottom: 40px; }
.page-heading h1 { margin: 0; }
.page-heading--left { text-align: left; }

/* Thin full-width rule beneath a page heading (Research page) */
.page-rule {
    border: none;
    border-top: 1px solid rgba(0, 0, 0, 0.18);
    margin: 0 auto 40px;
    max-width: var(--maxw);
}

/* --- Editorial numbered list (Research requirements) --------------------- */
.num-list {
    list-style: decimal;
    margin: 0 auto;
    padding-left: 22px;
    max-width: 760px;
}
.num-list li { padding: 8px 0; font-size: 17px; line-height: 1.55; }

/* --- ABOUT: team cards sit in cream boxes with a hairline --------------- */
.team-card--boxed {
    border: 1px solid rgba(0, 0, 0, 0.12);
    padding: 14px 14px 22px;
    background: var(--paper);
}
.team-card--boxed img { margin-bottom: 14px; }
.team-card .name { font-size: 15px; font-weight: 700; margin: 0 0 2px; }
.team-card .role { display: block; }

/* Mission outline with nested sub-points */
.mission-body { max-width: 820px; margin: 0 auto; }
.mission-body > p { font-size: 17px; line-height: 1.6; }
.mission-outline { list-style: disc; padding-left: 24px; margin: 20px 0 0; }
.mission-outline > li { padding: 6px 0; font-size: 17px; }
.mission-outline ul { list-style: circle; padding-left: 24px; margin: 6px 0; }
.mission-outline ul li { padding: 4px 0; }

/* --- BLOGS: circular thumbnail grid ------------------------------------- */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 48px 32px;
}
.blog-card { text-align: center; }
.blog-card__thumb {
    display: block;
    width: 150px;
    height: 150px;
    margin: 0 auto 18px;
    border-radius: 50%;
    overflow: hidden;
}
.blog-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.blog-card h3 {
    font-size: 17px;
    font-family: var(--serif-body);
    line-height: 1.4;
    letter-spacing: 0;
    margin-bottom: 14px;
}
.blog-card .btn { font-size: 14px; padding: 10px 18px; }

/* --- SPONSORS: single row of logos on cream ----------------------------- */
.sponsor-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
    align-items: center;
}
.sponsor-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 150px;
    padding: 12px;
}
.sponsor-logo img { max-height: 130px; width: auto; }

/* --- AVA 5K ------------------------------------------------------------- */
.race-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 28px 0;
}
.race-strip img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.race-logistics { margin: 28px 0; }
.race-logistics p { font-size: 18px; margin-bottom: 6px; }
.race-merch {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: center;
    margin: 24px 0 8px;
    max-width: 640px;
}
.race-merch img { width: 100%; max-height: 200px; object-fit: contain; }
.race-history {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    text-align: center;
    margin-top: 20px;
}
.race-history h3 { font-size: 22px; margin-bottom: 8px; }
.race-history p { margin-bottom: 4px; font-size: 15px; }
.sponsor-tiers {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin: 24px 0 40px;
}
.sponsor-tier h3 { font-size: 22px; margin-bottom: 10px; }
.sponsor-tier ul { list-style: disc; padding-left: 20px; margin: 0; }
.sponsor-tier li { font-size: 15px; margin-bottom: 6px; line-height: 1.45; }

/* --- EVENTS: hero + horizontal event cards ------------------------------ */
.events-hero { width: 100%; overflow: hidden; position: relative; }
.events-hero img { width: 100%; max-height: 320px; object-fit: cover; }
.event-row {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 32px;
    align-items: start;
    padding: 28px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
.event-row img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.event-row h3 { font-size: 26px; margin-bottom: 8px; }
.event-row .event-date { font-size: 15px; margin-bottom: 16px; }
.event-view { display: inline-block; margin-top: 4px; }
/* prominent bold underlined info link, matching the reference */
.events-info-link { margin-bottom: 36px; }
.events-info-link a {
    font-family: var(--serif-display);
    font-size: 26px;
    line-height: 1.25;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* --- DONATE: hero photo with overlaid widget ---------------------------- */
.donate-hero { position: relative; overflow: hidden; }
.donate-hero > img {
    width: 100%;
    height: 100%;
    max-height: 560px;
    object-fit: cover;
    position: absolute;
    inset: 0;
}
/* dark scrim so the white hero copy stays legible over the bright temple photo */
.donate-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.42) 42%, rgba(0,0,0,0.12) 100%);
    pointer-events: none;
}
.donate-hero__inner {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 40px;
    align-items: center;
    padding: 90px 0;
    min-height: 480px;
}
.donate-hero__copy { color: var(--white); max-width: 460px; }
.donate-hero__copy h1 { color: var(--white); }
.donate-hero__copy p { color: var(--white); font-size: 17px; }
.donate-widget {
    background: var(--paper);
    padding: 30px;
    border: 1px solid rgba(0, 0, 0, 0.1);
}
.donate-widget .amount-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    font-size: 16px;
}
.donate-widget select {
    width: 100%;
    font-family: var(--serif-body);
    font-size: 16px;
    padding: 13px 15px;
    border: 1px solid var(--ink);
    border-radius: 0;
    background: var(--white);
    margin: 18px 0;
}
.donate-widget .total-row {
    display: flex;
    justify-content: space-between;
    font-weight: 700;
    margin-bottom: 18px;
}

/* --- CONTACT: info left / form right ------------------------------------ */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: start;
}
.contact-intro p { font-size: 17px; line-height: 1.6; }
.contact-intro .btn { margin-top: 22px; }
.req-hint { opacity: 0.6; font-size: 13px; }

/* --- SYMPOSIUM: title + left rail (directors) / right body -------------- */
.symposium-title {
    text-align: center;
    max-width: 900px;
    margin: 0 auto 48px;
    font-size: 34px;
    line-height: 1.25;
}
.symposium-grid {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 56px;
    align-items: start;
}
.symposium-download { margin-bottom: 32px; }
.symposium-rail__heading {
    text-align: center;
    font-size: 22px;
    margin-bottom: 20px;
}
.director-card { text-align: center; margin-bottom: 32px; }
.director-card img {
    width: 100%;
    max-width: 220px;
    height: auto;
    display: block;
    margin: 0 auto 14px;
}
.director-card__name { font-weight: 700; margin-bottom: 4px; }
.director-card__role {
    font-size: 14px;
    line-height: 1.4;
    opacity: 0.85;
    margin: 0;
}

.symposium-body p { font-size: 16px; line-height: 1.65; margin-bottom: 14px; }
.symposium-meta { font-weight: 700; margin-bottom: 24px; }
.symposium-welcome { margin-bottom: 24px; }
.symposium-heading {
    font-size: 20px;
    margin: 28px 0 12px;
}
.symposium-list {
    margin: 0 0 18px 22px;
    padding: 0;
    list-style: disc;
}
.symposium-list li { font-size: 16px; line-height: 1.6; margin-bottom: 8px; }
.symposium-reglinks { margin-bottom: 8px; }
.symposium-previous-label { font-weight: 700; margin-top: 24px; }

/* --- SYMPOSIUM REGISTRATION: hero banner + boxed form ------------------- */
.symreg-hero {
    position: relative;
    min-height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.symreg-hero img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}
.symreg-hero .container {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
}
.symreg-hero__title {
    background: var(--paper);
    border: 1px solid var(--ink);
    padding: 22px 48px;
    font-size: 30px;
    text-align: center;
    margin: 40px 0;
}
.symreg .symreg-card {
    background: var(--paper);
    border: 1px solid var(--ink);
    padding: 48px 44px;
    margin-top: -60px;
    position: relative;
    z-index: 2;
}
.symreg .fee-note { font-size: 14px; opacity: 0.8; margin: 4px 0 12px; }
.symreg .radio-group ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.symreg .radio-group li { margin-bottom: 8px; }
.symreg .radio-group label {
    display: inline;
    font-weight: 400;
    margin-left: 6px;
    text-transform: none;
    letter-spacing: 0;
}
.symreg .radio-group input[type="radio"] { width: auto; }

/* --- AVAGH JOURNAL: art + about copy, then 3-col masthead --------------- */
.journal-about {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 48px;
    align-items: start;
    max-width: var(--maxw);
    margin: 0 auto;
}
.journal-about__art img { width: 100%; }
.journal-about__copy p { font-size: 16px; line-height: 1.65; margin-bottom: 16px; }
.journal-invite { font-weight: 700; }
.journal-submit { font-weight: 700; }
.journal-pub-cta { text-align: center; margin-top: 48px; }

.masthead {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    text-align: center;
    max-width: var(--maxw);
    margin: 0 auto;
    border-top: 1px solid rgba(0, 0, 0, 0.18);
    padding-top: 48px;
}
.masthead-heading {
    font-family: var(--serif-body);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0;
    margin: 24px 0 10px;
}
.masthead-col > .masthead-heading:first-child { margin-top: 0; }
.masthead-name { font-size: 15px; line-height: 1.5; margin: 0 0 4px; }

/* --- AVAGH PUBLICATIONS: 3-col index of article cards ------------------- */
.pub-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 48px 40px;
    text-align: center;
    max-width: var(--maxw);
    margin: 0 auto;
}
.pub-card__title {
    font-family: var(--serif-body);
    font-size: 17px;
    line-height: 1.4;
    letter-spacing: 0;
    margin-bottom: 10px;
}
.pub-card__title a { text-decoration: underline; }
.pub-card__author { font-size: 14px; opacity: 0.85; margin: 0; }

/* --- AVAGH ARTICLE DETAIL: title + art/PDF rail + author/abstract/DOI --- */
.article-head { text-align: center; max-width: 820px; margin: 0 auto 48px; }
.article-title { margin: 0 0 12px; }
.article-volume { font-size: 16px; opacity: 0.85; margin: 0; }
.article-body {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 48px;
    align-items: start;
    max-width: var(--maxw);
    margin: 0 auto;
}
.article-cover { width: 100%; margin-bottom: 24px; }
.article-label {
    font-family: var(--serif-body);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.04em;
    margin: 24px 0 8px;
}
.article-main > .article-label:first-child { margin-top: 0; }
.article-author { font-size: 16px; margin: 0 0 8px; }
.article-para { font-size: 16px; line-height: 1.7; margin-bottom: 14px; }
.article-doi { font-size: 15px; word-break: break-word; }

.article-refs {
    max-width: var(--maxw);
    margin: 48px auto 0;
    border-top: 1px solid rgba(0, 0, 0, 0.18);
    padding-top: 20px;
}
.article-refs > summary {
    cursor: pointer;
    font-family: var(--serif-display);
    font-size: 22px;
    list-style: none;
}
.article-refs > summary::-webkit-details-marker { display: none; }
.article-refs > summary::before { content: '+ '; }
.article-refs[open] > summary::before { content: '\2013 '; }
.article-refs__list { list-style: none; padding-left: 0; margin: 20px 0 0; }
.article-refs__list li {
    font-size: 14px;
    line-height: 1.55;
    margin-bottom: 12px;
    word-break: break-word;
}
.article-back { text-align: center; margin-top: 48px; }
.article-back a { text-decoration: underline; }

/* --- RESPONSIVE --------------------------------------------------------- */
@media (max-width: 980px) {
    .blog-grid { grid-template-columns: repeat(3, 1fr); }
    .sponsor-row { grid-template-columns: repeat(2, 1fr); }
    .donate-hero__inner { grid-template-columns: 1fr; gap: 28px; padding: 56px 0; }
    .donate-hero__copy { max-width: none; }
    .contact-grid { grid-template-columns: 1fr; gap: 40px; }
    .race-history { grid-template-columns: 1fr; gap: 24px; }
    .symposium-grid { grid-template-columns: 1fr; gap: 40px; }
    .symposium-title { font-size: 28px; }
    .symreg-hero__title { font-size: 24px; padding: 18px 28px; }
    .symreg .symreg-card { padding: 36px 24px; }
    .journal-about { grid-template-columns: 1fr; gap: 28px; }
    .journal-about__art { max-width: 320px; margin: 0 auto; }
    .masthead { grid-template-columns: 1fr; gap: 32px; }
    .pub-grid { grid-template-columns: repeat(2, 1fr); }
    .article-body { grid-template-columns: 1fr; gap: 28px; }
    .article-rail { max-width: 280px; margin: 0 auto; }
}

@media (max-width: 767px) {
    .blog-grid { grid-template-columns: repeat(2, 1fr); }
    .race-strip { grid-template-columns: 1fr; }
    .race-merch { grid-template-columns: 1fr; max-width: 320px; margin: 0 auto; }
    .event-row { grid-template-columns: 1fr; gap: 16px; }
    .contact-grid { gap: 32px; }
    .sponsor-tiers { grid-template-columns: 1fr; gap: 24px; }
    .race-history { grid-template-columns: 1fr; gap: 24px; }
    .pub-grid { grid-template-columns: 1fr; }
}

@media (max-width: 440px) {
    .blog-grid { grid-template-columns: 1fr; }
    .sponsor-row { grid-template-columns: 1fr; }
}