/* ==================================================================================================
   LAS PIERNAS — NEW ENGINE STYLES (new_style.css)
   --------------------------------------------------------------------------------------------------
   Styles for the new engine: [new_lp_item] cards and [new_fade_scroll] boxes (functions.php
   Sections 11–12). Loaded on every page after style.css (Section 01), and on the lp_item edit
   screen for the card preview. Every class here starts with "new-": only the new engine writes
   them, so this file and style.css never touch each other's cards or boxes.
   The look starts as a copy of the live site's (style.css 10000 cards, 20000 boxes), restated
   under the rules below. The few deliberate differences are marked "CHANGED:".
   On migration day: remove the old card and box rules from style.css, move this file into
   style.css, drop "new-" here and in the PHP, test (go-live checklist).

   THE RULES OF THIS FILE
   1. Base rules read variables; blocks only set variables. A block never re-declares a property
      the base sets: it changes the base's variable instead. It may add properties the base does
      not set.
   2. One class per selector. Allowed with it: an element after it (".new-c-list__body p"), a state
      or structure test (:hover, :first-child, :has(…), and the state class .fade-active that
      site.js sets), and — inside an article's text only — the class the block editor writes
      (".new-c-scroll__body .wp-block-list"). No ids, no nesting under page or Colibri classes.
      Every rule then weighs about the same, so the order of the file decides — and the numbers
      are that order.
   3. Responsive rules live inside their own block (x9).
   4. Anything that must "just work" goes in block 9, with a date and a reason, and is folded back
      into its proper block later. Block 9 is the only place for !important (used only to answer
      an !important in style.css, or a Colibri rule that wins otherwise).

   THE NUMBERS: B P RR — block, part, rule (rules in steps of 10, when a part needs them)
     Blocks  0 base (tokens, the card every presentation shares, the list, the divider)
             1 activity_description_card    2 activity event cards (events among the activities)
             3 class_description_card, class_event_card   4 class_event_list
             5 banner (ticker)              6 promotion_event_card (the top images)
             7 fade-scroll box (article_fadescrollbox)
             8 the card preview in the lp_item form (admin)
             9 escape hatch: dated fixes
     Parts   x0 variables   x1 layout   x2 media / icon   x3 title   x4 lines under the title
             x5 body        x6 divider, footer and extras            x9 responsive
     e.g. 0300 is the base title, 1300 the activity title, 3300 the class description title.
     Search for "1300 " to land on a part.

   THE CLASSES (Sections 11–12)
     Cards  .new-lp-list  .new-lp-list--{presentation}  .new-lp-list--empty
            .new-c-list   .new-c-list--{presentation}
                          .new-c-list--{presentation}-description | -event   .new-c-list--{presentation}-special
                          .new-c-list--has-media | --no-media   .new-c-list--no-subtitle
              __anchor  __media (img.new-lp-event-image)  __icon  __content  __header  __title (h4)
              __subtitle (> __line, __line--when | --fees | --error)  __body  __footer
            .new-lp-timeline-divider
     Boxes  .new-c-scroll  .new-c-scroll--article_fadescrollbox  .new-c-scroll--light | --dark
              __header (--sticky)  __title  __subtitle  __viewport  __body  __footer (--sticky)
              __indicator          + .fade-active on the box while there is more to read (site.js)
   ================================================================================================== */


/* ==================================================================================================
   BLOCK 0 — BASE
   ================================================================================================== */

/* 0000 variables: the tokens ---------------------------------------------------------------------
   The palette points at style.css's own variables (00100 BRAND PALETTE), so there is one source of
   colour; the value after each comma is used only if that variable is missing. */
:root {
    --new-color-red:      var(--lp-logo-red, #be1828);
    --new-color-brass:    var(--lp-brass, #a8905d);
    --new-color-dark:     var(--lp-dark-1, #1a1a1a);
    --new-color-black:    var(--lp-black-sub, #1a1a1a);
    --new-color-white:    var(--lp-white-sub, #fcfcfd);
    --new-color-light:    var(--lp-light-1, #f7f4ef);
    --new-color-glow:     var(--lp-glow, rgba(168, 144, 93, 0.35));
    --new-transition:     var(--lp-transition, all 0.3s cubic-bezier(0.4, 0, 0.2, 1));

    /* The fills: brass (style.css 10700) for the nightlife titles and the college fee plaque;
       redwood with a grain for the college titles (CHANGED: the live college titles are leather) */
    --new-fill-brass:   linear-gradient(135deg, #8a6d3b 0%, #a8905d 25%, #f3e5ab 50%, #a8905d 75%, #8a6d3b 100%);
    --new-fill-redwood: repeating-linear-gradient(97deg, rgba(40, 10, 4, 0.22) 0 1px, transparent 1px 5px),
                        repeating-linear-gradient(83deg, rgba(255, 210, 170, 0.14) 0 2px, transparent 2px 9px),
                        linear-gradient(to right, #5a1e12 0%, #8b3a22 22%, #6b2817 45%, #a0502e 68%, #5e2214 100%);

    --new-scroll-offset: 140px;   /* links land this far below the top (style.css 30300) */
}

/* The card's own variables: what the blocks below change. As on the live site, a card has no
   background of its own: the Colibri section behind it shows through. */
.new-c-list {
    /* THE LIGHT: one light, from the top left, on every card (the college cards' soft shadows).
       A block sets only how strong it is for its background: glint (the lit edge), ink (the
       shadow under titles and pills), ink-soft (the shadow under icons). */
    --new-card-glint:         transparent;
    --new-card-ink:           rgba(0, 0, 0, 0.3);
    --new-card-ink-soft:      rgba(0, 0, 0, 0.12);
    --new-card-lift-text:     drop-shadow(1px 1px 0 var(--new-card-glint)) drop-shadow(2px 4px 4px var(--new-card-ink));
    --new-card-lift-pill:     1px 2px 4px var(--new-card-ink);
    --new-card-lift-box:      2px 4px 10px var(--new-card-ink-soft);

    --new-card-bg:            transparent;
    --new-card-color:         inherit;
    --new-card-border:        0 solid transparent;
    --new-card-shadow:        none;
    --new-card-padding:       30px 25px;
    --new-card-align:         center;            /* CHANGED: every card centred (the live activity
                                                    cards are left-aligned) */

    --new-card-media-ratio:   auto;
    --new-card-media-fit:     cover;

    --new-card-icon-size:     auto;
    --new-card-icon-font:     inherit;
    --new-card-icon-color:    inherit;
    --new-card-icon-bg:       transparent;
    --new-card-icon-border:   0 solid transparent;
    --new-card-icon-radius:   0;
    --new-card-icon-shadow:   none;
    --new-card-icon-margin:   0 auto 20px;

    --new-card-title-display: block;
    --new-card-title-font:    inherit;
    --new-card-title-size:    1.55rem;
    --new-card-title-weight:  700;
    --new-card-title-case:    none;
    --new-card-title-color:   inherit;
    --new-card-title-fill:    none;              /* a gradient here + clip "text" = metallic letters */
    --new-card-title-clip:    border-box;
    --new-card-title-ink:     currentColor;      /* transparent with a fill */
    --new-card-title-filter:  none;              /* var(--new-card-lift-text) to lift it */
    --new-card-title-margin:  0 0 5px;

    --new-card-lines-font:    inherit;
    --new-card-lines-size:    inherit;
    --new-card-lines-weight:  500;
    --new-card-lines-case:    uppercase;
    --new-card-lines-spacing: normal;
    --new-card-lines-color:   inherit;
    --new-card-lines-margin:  10px 0 0;
    --new-card-lines-align:   inherit;

    /* The date and the fee, each a line of its own under the title, on every card with or without
       an image: the date between two brass rules, the fee in a tight red pill (style.css 10750).
       CHANGED: the live site puts the date in the pill with the fee, and on a card without an
       image writes both as plain lines. */
    --new-card-when-color:    inherit;
    --new-card-when-size:     0.85rem;
    --new-card-when-weight:   600;
    --new-card-when-spacing:  0.12em;
    --new-card-when-gap:      8px;               /* space between the date and the fee */

    --new-card-fee-bg:        var(--new-color-red);
    --new-card-fee-color:     var(--new-color-white);
    --new-card-fee-border:    0 solid transparent;
    --new-card-fee-padding:   2px 12px;
    --new-card-fee-weight:    600;
    --new-card-fee-spacing:   inherit;

    --new-card-body-size:     0.95rem;
    --new-card-body-leading:  1.6;
    --new-card-body-color:    inherit;
    --new-card-body-width:    none;
    --new-card-body-margin:   12px 0 0;
    --new-card-link-color:    inherit;
    --new-card-link-hover:    inherit;
}

/* 0100 layout ------------------------------------------------------------------------------------ */
.new-lp-list {
    display: flex;
    flex-direction: column;
    container-type: inline-size;                 /* titles can size to the column (3000) */
}

.new-lp-list--empty {
    display: none;
}

.new-c-list {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
    margin-top: 0;
    padding: var(--new-card-padding);
    background: var(--new-card-bg);
    color: var(--new-card-color);
    border: var(--new-card-border);
    box-shadow: var(--new-card-shadow);
    text-align: var(--new-card-align);
    transition: var(--new-transition);
    scroll-margin-top: var(--new-scroll-offset);
}

/* The horizon: a brass line across the top of each card, none on the first (style.css 01200) */
.new-c-list::before {
    content: "";
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, var(--new-color-brass) 20%, #e5d5b0 50%, var(--new-color-brass) 80%, transparent 100%);
    z-index: 20;
}

.new-c-list:first-child::before {
    display: none;
}

/* Lift and shine on hover (style.css 10900) */
.new-c-list:hover {
    z-index: 50;
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 40px -15px var(--new-color-glow);
}

.new-c-list:hover::before {
    height: 3px;
    background: linear-gradient(90deg, transparent 0%, var(--new-color-brass) 20%, #ffffff 50%, var(--new-color-brass) 80%, transparent 100%);
}

/* A card a link has just jumped to (style.css 30300) */
.new-c-list:target {
    box-shadow: 0 0 0 3px var(--new-color-brass), 0 20px 40px -15px var(--new-color-glow);
}

.new-c-list__content {
    min-width: 0;
}

/* A second landing point (a description shown through its first event's card): takes no room */
.new-c-list__anchor {
    position: absolute;
    top: 0;
    left: 0;
    scroll-margin-top: var(--new-scroll-offset);
}

/* 0200 media / icon ------------------------------------------------------------------------------ */
.new-c-list__media {
    position: relative;
    margin: 0;
    aspect-ratio: var(--new-card-media-ratio);
    overflow: hidden;
}

/* TODAY: a brass sash across the image's top left corner ("Ce soir", "En cours"…), on every image
   with an occurrence today (Section 09) */
.new-c-list__today {
    position: absolute;
    z-index: 2;
    top: 46px;
    left: -52px;
    width: 220px;
    padding: 5px 0;
    transform: rotate(-45deg);
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.14em;
    text-align: center;
    text-transform: uppercase;
    color: #3d1f12;
    background: var(--new-fill-brass);
    border-top: 1px solid rgba(255, 255, 255, 0.45);
    border-bottom: 1px solid rgba(0, 0, 0, 0.25);
    box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.35);
    pointer-events: none;
}

.new-c-list__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: var(--new-card-media-fit);
}

.new-c-list__icon {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--new-card-icon-size);
    height: var(--new-card-icon-size);
    margin: var(--new-card-icon-margin);
    font-size: var(--new-card-icon-font);
    color: var(--new-card-icon-color);
    background: var(--new-card-icon-bg);
    border: var(--new-card-icon-border);
    border-radius: var(--new-card-icon-radius);
    box-shadow: var(--new-card-icon-shadow);
}

.new-c-list__icon i {
    font-size: inherit;
    color: inherit;
}

/* 0300 title ------------------------------------------------------------------------------------- */
.new-c-list__title {
    display: var(--new-card-title-display);
    margin: var(--new-card-title-margin);
    font-family: var(--new-card-title-font);
    font-size: var(--new-card-title-size);
    font-weight: var(--new-card-title-weight);
    line-height: 1.15;
    text-transform: var(--new-card-title-case);
    color: var(--new-card-title-color);
    background: var(--new-card-title-fill);
    -webkit-background-clip: var(--new-card-title-clip);
    background-clip: var(--new-card-title-clip);
    -webkit-text-fill-color: var(--new-card-title-ink);
    filter: var(--new-card-title-filter);
}

/* 0400 lines under the title (schedule, fee) ----------------------------------------------------- */
.new-c-list__subtitle {
    display: block;
    margin: var(--new-card-lines-margin);
    font-family: var(--new-card-lines-font);
    font-size: var(--new-card-lines-size);
    font-weight: var(--new-card-lines-weight);
    line-height: 1.4;
    letter-spacing: var(--new-card-lines-spacing);
    text-transform: var(--new-card-lines-case);
    text-align: var(--new-card-lines-align);
    color: var(--new-card-lines-color);
}

.new-c-list__line {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.new-c-list__line--fees {
    display: table;
    padding: var(--new-card-fee-padding);
    font-weight: var(--new-card-fee-weight);
    letter-spacing: var(--new-card-fee-spacing);
    color: var(--new-card-fee-color);
    background: var(--new-card-fee-bg);
    border: var(--new-card-fee-border);
    box-shadow: var(--new-card-lift-pill);
}

.new-c-list__line--when {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6em;
    margin-bottom: var(--new-card-when-gap);
    font-size: var(--new-card-when-size);
    font-weight: var(--new-card-when-weight);
    letter-spacing: var(--new-card-when-spacing);
    color: var(--new-card-when-color);
}

.new-c-list__line--when::before,
.new-c-list__line--when::after {
    content: "";
    flex: 1 1 0;                                 /* the rules take only the room the date leaves: */
    min-width: 1em;                              /* never less than 1em, never more than 2.5em */
    max-width: 2.5em;
    border-top: 1px solid var(--new-color-brass);
}

/* 0500 body -------------------------------------------------------------------------------------- */
.new-c-list__body {
    max-width: var(--new-card-body-width);
    margin: var(--new-card-body-margin);
    font-size: var(--new-card-body-size);
    line-height: var(--new-card-body-leading);
    color: var(--new-card-body-color);
    overflow-wrap: anywhere;
}

.new-c-list__body p {
    margin: 0 0 0.6em;
}

.new-c-list__body p:last-child {
    margin-bottom: 0;
}

.new-c-list__body a {
    color: var(--new-card-link-color);
    text-decoration: underline;
    transition: var(--new-transition);
}

.new-c-list__body a:hover {
    color: var(--new-card-link-hover);
}

.new-c-list a:focus-visible {
    outline: 2px solid var(--new-color-brass);
    outline-offset: 2px;
}

/* 0600 divider and footer -----------------------------------------------------------------------
   CHANGED: the live site leaves "À venir" / "Coming Soon" unstyled; here it is a brass rule with
   the words in the middle. */
.new-lp-timeline-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1rem 0;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--new-color-brass);
}

.new-lp-timeline-divider::before,
.new-lp-timeline-divider::after {
    content: "";
    flex: 1;
    border-top: 1px solid currentColor;
    opacity: 0.6;
}

.new-c-list__footer {
    margin-top: 12px;
    font-size: 0.85rem;
}

/* 0900 responsive -------------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .new-c-list,
    .new-c-list:hover {
        transition: none;
        transform: none;
    }
}


/* ==================================================================================================
   BLOCK 1 — activity_description_card (every card in the activities column): NIGHTLIFE
   The live "core descriptions" look (style.css 10700–10770): brass metallic titles, light blue
   text, white dates, the target icon — on the dark section Colibri puts behind them.
   ================================================================================================== */

/* 1000 variables --------------------------------------------------------------------------------- */
.new-c-list--activity_description_card {
    /* the light on a dark background: a faint glint, deeper shadows (0000) */
    --new-card-glint:         rgba(255, 255, 255, 0.2);
    --new-card-ink:           rgba(0, 0, 0, 0.6);
    --new-card-ink-soft:      rgba(0, 0, 0, 0.45);

    /* 1300 title: metallic brass, lifted by the light (CHANGED: the live 3D edge is a text-shadow,
       which shows through the transparent letters and turns them near-black) */
    --new-card-title-size:    2.2rem;            /* the live size (style.css forces every h3 to it) */
    --new-card-title-weight:  800;
    --new-card-title-case:    uppercase;
    --new-card-title-fill:    var(--new-fill-brass);
    --new-card-title-clip:    text;
    --new-card-title-ink:     transparent;
    --new-card-title-filter:  var(--new-card-lift-text);

    /* 1400 lines: the date white; the fee in the red pill (0000) */
    --new-card-lines-color:   var(--new-color-white);

    /* 1500 body: light blue on dark; links lighter brass */
    --new-card-body-color:    #add8e6;
    --new-card-link-color:    #d4af37;
    --new-card-link-hover:    #f3e5ab;

    /* 1200 icon: the target — red ring, white layer, black centre, red icon */
    --new-card-icon-size:     76px;
    --new-card-icon-font:     2rem;
    --new-card-icon-color:    var(--new-color-red);
    --new-card-icon-bg:       var(--new-color-white);
    --new-card-icon-border:   3px solid var(--new-color-red);
    --new-card-icon-radius:   50%;
    --new-card-icon-shadow:   inset 0 0 0 50px #1a1a1a, var(--new-card-lift-box);
    --new-card-icon-margin:   18px auto;
}


/* 1100 layout: the background behind the activity cards ----------------------------------------
   Today Colibri paints it: the activities column is a dark grey (about #5b5b5b, the brick
   showing faintly through), and the cards themselves have no background. Kept here, switched off,
   for the day that background moves out of Colibri: remove the comment marks and clear it there.

.new-lp-list--activity_description_card {
    background: #5b5b5b;
    padding: 10px 0;
}
*/


/* ==================================================================================================
   BLOCK 2 — activity event cards (the events among the activities)
   The live site styles them exactly as the activity cards (block 1): nothing to add yet.
   ================================================================================================== */

/* 2000 variables --------------------------------------------------------------------------------- */
/* .new-c-list--activity_description_card-event     (none yet)
   .new-c-list--activity_description_card-special   (none yet) */


/* ==================================================================================================
   BLOCK 3 — class_description_card and class_event_card: COLLEGE
   (the class super cards: each description, then its classes; the classes look as their
   description, so one rule serves both)
   The live "academic" look (style.css 10800–10840): a light vignette, centred, the brass square
   icon — with the nightlife's proportions in college materials: redwood titles at the nightlife
   size, the nightlife date in red, the fee on a brass plaque.
   ================================================================================================== */

/* 3000 variables --------------------------------------------------------------------------------- */
.new-c-list--class_description_card,
.new-c-list--class_event_card {
    --new-card-bg:            radial-gradient(circle, #ffffff 0%, #e0e0e0 100%);
    --new-card-color:         var(--new-color-black);
    --new-card-border:        1px solid #ccc;
    --new-card-shadow:        inset 0 0 50px rgba(0, 0, 0, 0.05);
    --new-card-padding:       18px;

    /* the light on a light background: a white glint, soft shadows (0000 defaults) */
    --new-card-glint:         rgba(255, 255, 255, 0.7);

    /* 3200 icon: brass square, lifted by the light */
    --new-card-icon-size:     65px;
    --new-card-icon-font:     2.1rem;
    --new-card-icon-color:    var(--new-color-brass);
    --new-card-icon-bg:       var(--new-color-white);
    --new-card-icon-border:   2px solid var(--new-color-brass);
    --new-card-icon-shadow:   var(--new-card-lift-box);
    --new-card-icon-margin:   0 auto 20px;

    /* 3300 title: redwood with a grain, Playfair Display, capitals — the nightlife size, a little
       smaller in a narrow column (CHANGED: live is leather Georgia 1.55rem) */
    --new-card-title-display: inline-block;
    --new-card-title-font:    'Playfair Display', Georgia, serif;
    --new-card-title-size:    clamp(1.5rem, 6cqi, 2.2rem);
    --new-card-title-weight:  800;
    --new-card-title-case:    uppercase;
    --new-card-title-fill:    var(--new-fill-redwood);
    --new-card-title-clip:    text;
    --new-card-title-ink:     transparent;
    --new-card-title-filter:  var(--new-card-lift-text);

    /* 3400 lines: the nightlife date, in red; the fee on a brass plaque, dark redwood capitals
       (CHANGED: live writes both in plain red Montserrat) */
    --new-card-lines-color:   var(--new-color-red);
    --new-card-fee-bg:        var(--new-fill-brass);
    --new-card-fee-color:     #3d1f12;
    --new-card-fee-border:    1px solid #8a6d3b;
    --new-card-fee-padding:   3px 14px;
    --new-card-fee-weight:    700;
    --new-card-fee-spacing:   0.08em;

    /* 3500 body */
    --new-card-body-color:    var(--new-color-black);
    --new-card-body-leading:  1.5;
    --new-card-body-width:    90%;
    --new-card-body-margin:   12px auto 0;
}

/* 3100 layout: the background behind the class cards -------------------------------------------
   Today Colibri paints it: the classes column is a light brick picture (about #f4f4f5 where it
   is plain), and the cards' own vignette sits on it. Kept here, switched off, for the day that
   background moves out of Colibri (the brick picture would need its address from Colibri):

.new-lp-list--class_description_card,
.new-lp-list--class_event_card,
.new-lp-list--class_event_list {
    background: #f4f4f5;
    padding: 10px 0;
}
*/


/* ==================================================================================================
   BLOCK 4 — class_event_list (more than 8 classes)
   (class_event_card: block 3.) The live "coming class list": plain lines, no card look.
   ================================================================================================== */

/* 4000 variables --------------------------------------------------------------------------------- */
.new-c-list--class_event_list {
    --new-card-padding:       12px 0;
    --new-card-title-size:    1rem;
    --new-card-title-weight:  700;
    --new-card-title-case:    uppercase;
    --new-card-lines-margin:  2px 0 0;
    --new-card-lines-case:    none;
}


/* ==================================================================================================
   BLOCK 5 — banner (ticker): special_event_ticker
   One black strip, everything in it always scrolling, on every screen (site.js Section 05): the
   contact details in white with blue icons — copied by site.js from Colibri's top bar (its Icon List
   with the class lp-ticker-contact; the bar stays, and hides once the page scrolls: the ticker then
   still carries them), or a contactpost's text — the messages in pale brass, an
   alert in a red block. A message happening today starts with its word ("Ce soir") in small brass
   capitals. Colibri's strip around it: set its background to #1a1a1a too.
   ================================================================================================== */

/* 5100 layout ------------------------------------------------------------------------------------ */
.new-lp-ticker {
    --new-ticker-today:    var(--new-color-brass);   /* the "Ce soir" word; white in an alert */
    overflow: hidden;
    padding: 6px 0;
    line-height: 1.5;
    white-space: nowrap;
    color: var(--new-color-white);
    background: var(--new-color-black);
}

.new-lp-ticker--empty {
    display: none;
}

.new-lp-ticker__track,
.new-lp-ticker__group {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

/* Scrolling: the track holds two identical groups and moves by exactly one; it pauses under the
   pointer or keyboard focus */
.new-lp-ticker.is-scrolling .new-lp-ticker__track {
    animation: new-lp-ticker-scroll linear infinite;
}

.new-lp-ticker:hover .new-lp-ticker__track,
.new-lp-ticker:focus-within .new-lp-ticker__track {
    animation-play-state: paused;
}

@keyframes new-lp-ticker-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* 5500 the items --------------------------------------------------------------------------------- */
.new-lp-ticker__item {
    color: inherit;
    text-decoration: none;
}

.new-lp-ticker__item:hover {
    text-decoration: underline;
}

.new-lp-ticker__item--contact {
    color: var(--new-color-white);
}

.new-lp-ticker__item--contact a {
    margin-right: 1.25em;
    color: inherit;
    text-decoration: none;
}

.new-lp-ticker__item--contact .wp-rich-text-font-awesome-icon {
    margin-right: 0.4em;
    color: #1877f2;                              /* the blue of today's top bar icons */
}

.new-lp-ticker__item--contact svg {
    width: 1em;
    height: 1em;
    fill: currentColor;
    vertical-align: -0.125em;
}

.new-lp-ticker__contact {
    display: inline-flex;
    align-items: center;
    margin-right: 1.25em;
}

/* the top bar's own wrappers, copied with it, kept on one line */
.new-lp-ticker__contact a,
.new-lp-ticker__contact div,
.new-lp-ticker__contact span {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    color: var(--new-color-white);
    text-decoration: none;
}

.new-lp-ticker__contact svg {
    width: 1em;
    height: 1em;
    color: #1877f2;
    fill: #1877f2;
}

.new-lp-ticker__item--promotional {
    color: #e5d5b0;
}

.new-lp-ticker__item--alert {
    --new-ticker-today:    var(--new-color-white);
    padding: 2px 12px;
    font-weight: 700;
    color: var(--new-color-white);
    background: var(--new-color-red);
}

.new-lp-ticker__today {
    font-size: 0.8em;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--new-ticker-today);
}

.new-lp-ticker__sep {
    margin: 0 1.25em;
    color: var(--new-color-brass);
}

/* 5900 responsive: reduced motion — everything visible at once, wrapping */
@media (prefers-reduced-motion: reduce) {
    .new-lp-ticker {
        white-space: normal;
    }

    .new-lp-ticker__track,
    .new-lp-ticker__group {
        flex-wrap: wrap;
        justify-content: center;
    }
}


/* ==================================================================================================
   BLOCK 6 — promotion_event_card (the top images)
   The live "coming event images": the image, and — only when Dates is ticked — the date under it,
   between brass rules (0000), in the colour of the Colibri section around it.
   ================================================================================================== */

/* 6200 media: the whole image is the link to its card */
.new-c-list__media a {
    display: block;
}

/* 6500 the motto (fallbackpost): shown when fewer than 2 posters are. site.js sizes it to end level
   with the photo beside it; this size is for phones (one column) and before the script runs.
   Brass words: in the post, select them and make them italic (Ctrl+I): they are then set in brass
   Playfair Display italic, as the headings' "nos …" words (style.css .lp-mag-h-alt). */
.new-lp-motto {
    margin: 0 0 20px;
    font-size: clamp(2rem, 7vw, 3.5rem);
    font-weight: 400;
    line-height: 1.12;
    text-align: right;
    color: #2b3240;
}

.new-lp-motto em {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    color: var(--new-color-brass);
}


/* ==================================================================================================
   BLOCK 7 — fade-scroll box (article_fadescrollbox)
   The live boxes (style.css 20000–20700): the text scrolls inside the box, a brass chevron on a
   fading stage says there is more, light ("academic") and dark ("nightlife") versions. Light and
   dark are the same rules with different values (7000).
   ================================================================================================== */

/* 7000 variables --------------------------------------------------------------------------------- */
.new-c-scroll {
    --new-scroll-max:      300px;                 /* set on the box by the shortcode's max_height */
    --new-scroll-surface:  var(--new-color-white);
    --new-scroll-color:    #333;
    --new-scroll-pad:      50px 27px 0 27px;
    --new-scroll-stage:    252 252 253;           /* the stage fades into the surface: its RGB */
    --new-scroll-stage-h:  103px;
    --new-scroll-rail:     36px;                  /* the bullet rail's width */
    --new-scroll-li-gap:   15px;
    --new-scroll-icon-x:   -31px;
    --new-scroll-icon-y:   5px;
    --new-scroll-icon-size: auto;
    --new-scroll-icon-ring: 0 solid transparent;
}

.new-c-scroll--dark {
    --new-scroll-surface:  var(--new-color-black);
    --new-scroll-color:    var(--new-color-white);
    --new-scroll-pad:      50px 50px 0 50px;
    --new-scroll-stage:    26 26 26;
    --new-scroll-rail:     70px;
    --new-scroll-li-gap:   20px;
    --new-scroll-icon-x:   -55px;
    --new-scroll-icon-y:   -2px;
    --new-scroll-icon-size: 32px;
    --new-scroll-icon-ring: 1px solid var(--new-color-brass);
}

/* No footer: a shorter stage (style.css 20500, 6) */
.new-c-scroll:not(:has(> .new-c-scroll__footer)) {
    --new-scroll-stage-h:  83px;
}

/* 7100 layout ------------------------------------------------------------------------------------ */
.new-c-scroll {
    position: relative;
    display: flex;
    flex-direction: column;
    height: auto;
    overflow: visible;
    background: transparent;
}

.new-c-scroll__viewport {
    position: relative;
    max-height: var(--new-scroll-max);
    overflow-y: auto;
    padding: var(--new-scroll-pad);
    padding-bottom: 83px;
    background: var(--new-scroll-surface);
    color: var(--new-scroll-color);
    text-align: left;
}

.new-c-scroll__header {
    text-align: center;
}
/* header="sticky": nothing to style. The header and footer sit outside the scrolling viewport, so
   they always stay put, on the page's background (as live: is-sticky has no rule in style.css). */

/* 7200 the chevron stage: hidden until site.js says there is more to read (.fade-active) -------- */
.new-c-scroll__indicator {
    position: relative;
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    height: var(--new-scroll-stage-h);
    margin-top: -83px;
    cursor: pointer;
    pointer-events: auto;
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    background: linear-gradient(to bottom,
        rgb(var(--new-scroll-stage) / 0) 0%,
        rgb(var(--new-scroll-stage) / 0.75) 50%,
        rgb(var(--new-scroll-stage) / 1) 100%);
}

.new-c-scroll__indicator::after {
    content: "\f103";
    position: relative;
    top: 45px;
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 32px;
    color: var(--new-color-brass);
    transform: translateY(5px);
    transition: transform 1.2s ease;
    animation: new-lp-chevron-sparkle 3s ease-in-out infinite;
}

.new-c-scroll.fade-active .new-c-scroll__indicator {
    opacity: 1;
    transform: translateY(0);
}

.new-c-scroll__indicator:focus-visible {
    outline: 2px solid var(--new-color-brass);
    outline-offset: -4px;
}

@keyframes new-lp-chevron-sparkle {
    0%, 100% { transform: translateY(0); color: var(--new-color-brass); text-shadow: none; }
    50%      { transform: translateY(6px); color: #f3e5ab; text-shadow: 0 0 15px rgba(168, 144, 93, 0.6); }
}

/* 7300 headings in the text ---------------------------------------------------------------------- */
.new-c-scroll__body h3 {
    width: 100%;
    text-align: center;
}

.new-c-scroll__body h5 {
    width: 100%;
    text-align: left;
    color: var(--new-color-brass);
    text-transform: uppercase;
    /* font-size 1em, weight 300 and spacing 1.5px: block 9 (style.css forces h5 with !important) */
}

/* 7500 body: the drop cap, the bullet rails ------------------------------------------------------ */
.new-c-scroll__body p:first-of-type::first-letter {
    display: block;
    float: left;
    padding: 8px 12px 4px 0;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 400;
    font-size: 4.2rem;
    line-height: 0.8;
    text-transform: uppercase;
    color: var(--new-color-brass);
}

.new-c-scroll__body ul {
    padding-left: var(--new-scroll-rail);
    list-style: none;
}

.new-c-scroll__body li {
    position: relative;
    margin-bottom: var(--new-scroll-li-gap);
}

.new-c-scroll__body .wp-rich-text-font-awesome-icon {
    position: absolute;
    left: var(--new-scroll-icon-x);
    top: var(--new-scroll-icon-y);
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--new-scroll-icon-size);
    height: var(--new-scroll-icon-size);
    border: var(--new-scroll-icon-ring);
    border-radius: 50%;
    color: var(--new-color-brass);        /* CHANGED: brass in dark boxes too (live: white there) */
}

.new-c-scroll__body .wp-rich-text-font-awesome-icon svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

/* 7600 footer: links pinned to the bottom, centred ----------------------------------------------- */
.new-c-scroll__footer {
    position: relative;
    order: 3;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    min-height: 60px;
    height: auto;
    padding: 0 20px 20px;
    text-align: center;
}

.new-c-scroll__footer a {
    display: block;
    margin-top: 5px;
    font-size: 0.9rem;
    line-height: 1.4;
    color: #0000ee;
    text-decoration: underline;
}

.new-c-scroll__footer a:visited {
    color: #551a8b;
}

/* 7900 responsive -------------------------------------------------------------------------------- */
@media (min-width: 992px) {
    /* Desktop: minimalist (style.css 20700) */
    .new-c-scroll__viewport {
        padding: 0 0 25px 0;
    }
}

@media (max-width: 991px) {
    /* Phone and tablet: brass touch rails on both sides (style.css 20700) */
    .new-c-scroll__viewport {
        padding: 15px 12px 30px;
        border-left: 2px solid rgba(168, 144, 93, 0.4);
        border-right: 2px solid rgba(168, 144, 93, 0.4);
        box-shadow: inset 10px 0 8px -10px rgba(168, 144, 93, 0.3),
                    inset -10px 0 8px -10px rgba(168, 144, 93, 0.3);
        /* CHANGED: never taller than about 70% of the screen, so the page can always be
           scrolled past the box */
        max-height: min(var(--new-scroll-max), 70vh);
    }

    .new-c-scroll__body {
        padding: 0 5px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .new-c-scroll__indicator,
    .new-c-scroll__indicator::after {
        transition: none;
        animation: none;
    }
}


/* ==================================================================================================
   BLOCK 8 — THE CARD PREVIEW (lp_item form, side column; this file is also loaded there)
   ================================================================================================== */

/* 8100 layout: each preview sits on the background Colibri gives its column on the page (1100,
   3100), so it looks as it will there */
.new-lp-preview__card:has(.new-lp-list--activity_description_card) {
    padding: 8px;
    background: #5b5b5b;
}

.new-lp-preview__card:has(.new-c-list--class_description_card),
.new-lp-preview__card:has(.new-c-list--class_event_card) {
    padding: 8px;
    background: #f4f4f5;
}

/* 8400 the date error (written only in the admin): Dates ticked, but no date could be written */
.new-c-list__line--error {
    margin-top: 6px;
    padding: 2px 8px;
    font-family: sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
    color: #b32d2e;
    background: #fff;
    border: 1px dashed #b32d2e;
}

/* 8600 extras: the FR / EN switch */
.new-lp-preview__langs {
    margin: 0 0 8px;
}


/* ==================================================================================================
   BLOCK 9 — ESCAPE HATCH
   Dated fixes only, each with a comment such as "9010 2026-11-02 — why". Fold each back into its
   block when there is time.
   ================================================================================================== */

/* 9010 2026-10-21 — style.css 01400 forces every h5 (Montserrat, 2px spacing, weight 700) with
   !important; the live boxes answer it the same way (style.css 20200). */
.new-c-scroll__body h5 {
    font-size: 1em !important;
    font-weight: 300 !important;
    letter-spacing: 1.5px !important;
}

/* 9020 2026-10-21 — style.css 01300 rounds the bottom corners of every div by 6px with a heavier
   selector, which squares off the bottom of the round target icon; the live icon answers it with
   !important (style.css 10710). */
.new-c-list__icon {
    border-radius: var(--new-card-icon-radius) !important;
}

/* 9030 2026-10-21 — Colibri gives the paragraphs in its sections their own colour and size, which
   beat what the card body passes down (navy text on the page, right in the preview); the live
   cards answer it the same way (style.css 10700, colour on the p and span themselves). */
.new-c-list__body p,
.new-c-list__body li,
.new-c-list__body span {
    color: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
}

/* 9040 2026-10-21 — the same Colibri paragraph rules would fix the motto's paragraphs at their own
   size, so site.js could not size the motto (6500). */
.new-lp-motto p {
    margin: 0 !important;
    font-size: inherit !important;
    line-height: inherit !important;
    color: inherit !important;
}