/* =====================================================================
   redcarpet.css - /red-carpet
   =====================================================================

   Scoped entirely to .rc-* so it cannot reach the site header, footer or
   nav. Everything else on the page borrows the shared .btn from
   base.css rather than restyling a button that already exists in three
   variants.

   The palette is the site's own tokens - --accent is the festival red
   and is what this page leans on, because the event is literally named
   after the colour. No new colours are introduced.
   ===================================================================== */

/* ---- Hero ---- */

.rc-hero {
    position: relative;
    /* 118px at the top, not 64. .site-header is position:fixed, so it
       sits OVER the first thing on the page - the kicker was tucked
       behind it. 110px is what .main-hero-content already uses to clear
       it; the extra 8 is so the kicker is not touching the underside of
       the header. */
    padding: 118px 20px 56px;
    /* A single deep-red wash rather than a photograph. There is no
       licensed image of this event that works at every viewport, and a
       hero that 404s or letterboxes is worse than one that does not
       try. The gradient does the work the carpet would. */
    background:
        radial-gradient(120% 90% at 50% 0%, rgba(214, 0, 0, .30), transparent 62%),
        linear-gradient(180deg, #170607 0%, var(--bg, #0b0b0b) 88%);
    border-bottom: 1px solid var(--line, #222);
    overflow: hidden;
}

.rc-hero-inner {
    max-width: 860px;
    margin: 0 auto;
    text-align: center;
}

.rc-kicker {
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--accent, #d60000);
}

.rc-hero h1 {
    margin: 0 0 14px;
    font-size: clamp(34px, 7vw, 64px);
    line-height: 1.04;
    letter-spacing: -0.02em;
}

.rc-lede {
    margin: 0 auto 28px;
    max-width: 620px;
    font-size: clamp(16px, 2.1vw, 18px);
    line-height: 1.62;
    color: var(--muted2, #cfcfcf);
}

/* ---- The fact bar ----
   Four cells across, straddling the join between the hero and the body.

   This replaced three pills sitting inside the hero, which wrapped
   two-then-one at most widths and read as an afterthought under the
   buttons. Equal cells in one card hold their shape at every width, and
   the negative margin lifts the card so it overlaps the hero's lower
   edge - which is what makes it read as a caption on the hero rather
   than as the first item of the body. */
.rc-bar {
    position: relative;
    z-index: 1;
    margin: -34px auto 0;
    padding: 0 20px;
    max-width: 1060px;
}

.rc-bar-card {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: 0;
    border: 1px solid var(--line, #222);
    border-radius: var(--radius, 14px);
    /* Opaque, not the usual translucent card: it sits over the hero
       gradient, and a see-through panel there turns the label text to
       mud. */
    background: #131011;
    overflow: hidden;
}

.rc-bar-item {
    padding: 18px 20px;
    border-right: 1px solid var(--line, #222);
    text-align: center;
    min-width: 0;
}
.rc-bar-item:last-child { border-right: 0; }

.rc-bar-card dt {
    margin-bottom: 5px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted, #aaa);
}

.rc-bar-card dd {
    margin: 0;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.4;
    color: var(--text, #fff);
}

/* ---- Section eyebrows ----
   A small label over each heading. Cheap, and it does two things: it
   gives a long page a scannable rhythm, and it lets a heading stay short
   because the label carries the context. */
.rc-eyebrow {
    margin: 0 0 8px !important;
    font-size: 11px !important;
    font-weight: 900;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--accent, #d60000) !important;
}

.rc-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    align-items: center;
}

/* Shown where the Register button would be, when there is no
   registration link yet. Deliberately not styled as a button - it is a
   sentence, and dressing it up as a control people cannot press is the
   thing this replaces. */
.rc-nolink {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--muted2, #cfcfcf);
}
.rc-nolink a { color: var(--accent, #d60000); font-weight: 700; }

/* ---- Body ---- */

.rc-body {
    max-width: 780px;
    margin: 0 auto;
    padding: 8px 20px 64px;
}

.rc-section { padding: 34px 0 0; }

/* ---- Two-column section ----
   Heading and the sentence that carries the section on the left, detail
   on the right. Slightly narrower left column, so the heading wraps
   early and the body has the room. */
.rc-split {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 20px 56px;
    align-items: start;
}
.rc-split > div > :first-child { margin-top: 0; }

.rc-lead {
    font-size: 17px !important;
    line-height: 1.6 !important;
    color: var(--muted2, #cfcfcf) !important;
}

/* ---- The practical checklist ----
   Custom markers rather than list-style, so the text wraps under itself
   instead of under the bullet. */
.rc-checks {
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
}

.rc-checks li {
    position: relative;
    padding: 0 0 0 26px;
    margin: 0 0 11px;
    font-size: 15px;
    line-height: 1.65;
    color: var(--muted2, #cfcfcf);
}

.rc-checks li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: .62em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent, #d60000);
}

.rc-checks a { color: var(--muted2, #cfcfcf); text-decoration: underline; }

.rc-section h2 {
    margin: 0 0 14px;
    font-size: clamp(21px, 3.4vw, 27px);
    letter-spacing: -0.01em;
}

.rc-section p {
    margin: 0 0 14px;
    font-size: 16px;
    line-height: 1.7;
    color: var(--muted2, #cfcfcf);
}

.rc-note {
    font-size: 14px !important;
    color: var(--muted, #aaa) !important;
}
.rc-note a { color: var(--muted2, #cfcfcf); text-decoration: underline; }

.rc-address {
    font-size: 16px;
    line-height: 1.7;
}
.rc-address strong { color: var(--text, #fff); }

/* ---- The running order ----
   Numbered, because the order is the information. counter-reset on the
   list and a counter on each item rather than the browser's own markers,
   so the number can sit in its own column and the text can wrap under
   itself rather than under the digit. */
.rc-run {
    list-style: none;
    counter-reset: rc-step;
    margin: 0 0 14px;
    padding: 0;
}

.rc-run li {
    counter-increment: rc-step;
    position: relative;
    padding: 0 0 18px 46px;
    border-left: 1px solid var(--line, #222);
    margin-left: 13px;
}

.rc-run li:last-child { border-left-color: transparent; padding-bottom: 0; }

.rc-run li::before {
    content: counter(rc-step);
    position: absolute;
    left: -13px;
    top: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--accent, #d60000);
    color: #fff;
    font-size: 12px;
    font-weight: 900;
}

.rc-run-label {
    display: block;
    font-weight: 800;
    font-size: 16px;
    margin-bottom: 3px;
    line-height: 1.3;
}

.rc-run-text {
    display: block;
    font-size: 15px;
    line-height: 1.65;
    color: var(--muted2, #cfcfcf);
}

/* ---- Guests and presenters ---- */

.rc-people {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    /* auto-FILL, so two guests are two normal cards rather than two
       half-page ones. Same reasoning as the film photo gallery. */
    /* 300px, not 220. The presenter lines carry a name and a credit
       ("Irene Roberts on Home and Away for 33 years, and the 2025 Gold
       Logie winner"), and at 220 those wrapped to five cramped lines
       per card. Measured against the real copy rather than guessed. */
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 12px;
}

.rc-people li {
    padding: 14px 16px;
    border: 1px solid var(--line, #222);
    border-radius: var(--radius, 14px);
    background: var(--card-bg, rgba(255, 255, 255, .03));
}

.rc-person-name {
    display: block;
    font-weight: 800;
    font-size: 16px;
    line-height: 1.3;
}

.rc-person-role {
    display: block;
    margin-top: 4px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--muted, #aaa);
}

/* ---- The closing call to action ---- */

.rc-cta {
    margin-top: 34px;
    padding: 28px 24px;
    border: 1px solid rgba(214, 0, 0, .35);
    border-radius: var(--radius-lg, 20px);
    background:
        radial-gradient(120% 140% at 50% 0%, rgba(214, 0, 0, .16), transparent 70%),
        var(--card-bg, rgba(255, 255, 255, .03));
}
.rc-cta h2 { margin-top: 0; }

/* Two-up before one-up: four cells at tablet width squeeze the venue
   name to three lines. */
@media (max-width: 860px) {
    .rc-bar-card { grid-template-columns: repeat(2, 1fr); }
    .rc-bar-item:nth-child(2) { border-right: 0; }
    .rc-bar-item:nth-child(-n+2) { border-bottom: 1px solid var(--line, #222); }
    .rc-split { grid-template-columns: 1fr; gap: 8px; }
}

@media (max-width: 560px) {
    .rc-hero { padding: 96px 18px 40px; }
    .rc-bar { margin-top: -20px; }
    .rc-bar-card { grid-template-columns: 1fr; }
    .rc-bar-item,
    .rc-bar-item:nth-child(2) { border-right: 0; border-bottom: 1px solid var(--line, #222); }
    .rc-bar-item:last-child { border-bottom: 0; }
    .rc-actions { flex-direction: column; align-items: stretch; }
    .rc-actions .btn { justify-content: center; }
}

/* The page is an invitation with a date, a place and a time on it, so it
   is one of the few on this site somebody will actually print. The
   gradients and the dark background are what a printer makes a mess of.
*/
@media print {
    .rc-hero {
        background: none;
        border-bottom: 1px solid #999;
        padding: 0 0 18px;
    }
    .rc-hero-inner, .rc-body { max-width: none; }
    .rc-kicker, .rc-run li::before { color: #000; background: none; }
    .rc-run li::before { border: 1px solid #000; color: #000; }
    .rc-bar-card, .rc-people li, .rc-cta { border-color: #999; background: none; }
    .rc-bar { margin-top: 12px; }
    .rc-eyebrow { color: #000 !important; }
    .rc-actions, .rc-cta .btn { display: none; }
}