/* aimlink.ai news section: what both variants share (chips, fallback, preview switch).
   Load after site.css; the rules join its cascade layers. Variant styles: fresh.css (A), gallery.css (B). */

@layer components {
  /* "New": lime as a fill with dark text (the only way lime may sit on a light page) */
  .news-new {
    position: relative; display: inline-flex; align-items: center; min-height: 24px; padding: 0 9px;
    border-radius: var(--radius-pill); background: var(--color-lime); color: var(--color-night);
    font: 600 var(--type-label-size)/1 var(--font-text); letter-spacing: 0.1em; text-transform: uppercase;
  }
  /* The ring that lands with it, played once by a variant (keyframes below) */
  .news-new::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    box-shadow: 0 0 0 1.5px var(--color-lime); opacity: 0;
  }

  /* Category on a photo: the app's competition colours (design system, 03 Colors) with night text, 5.6:1 or better;
     a category without a colour keeps the dark chip (snow on night 72 %: 6.8:1 over white) */
  .news-tag {
    display: inline-flex; align-items: center; min-height: 24px; padding: 0 9px;
    border-radius: var(--radius-pill); background: color-mix(in srgb, var(--color-night) 72%, transparent);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    color: var(--color-snow); font: 500 var(--type-label-size)/1 var(--font-text); letter-spacing: 0.1em; text-transform: uppercase;
  }

  .news-tag[data-cat] { background: var(--cat, color-mix(in srgb, var(--color-night) 72%, transparent)); color: var(--cat-ink, var(--color-snow)); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .news-tag[data-cat="product"] { --cat: var(--color-purple); --cat-ink: var(--color-night); }
  .news-tag[data-cat="club"] { --cat: var(--color-orange); --cat-ink: var(--color-night); }
  .news-tag[data-cat="shooters"] { --cat: var(--color-gold); --cat-ink: var(--color-night); }
  .news-tag[data-cat="events"] { --cat: var(--color-pink); --cat-ink: var(--color-night); }
  .news-tag[data-cat="company"] { --cat: var(--color-mist); --cat-ink: var(--color-night); }

  @keyframes news-impact { from { opacity: 0.9; transform: scale(1); } to { opacity: 0; transform: scale(1.8); } }
}

@layer sections {
  /* Before the stories have loaded (or without JS): heading and the archive link */
  .news[data-news]:not(.is-rendered) { min-height: 46rem; }
  .news-fallback { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-5); }

  /* The newsletter, as the last part of the news chapter (index.html: <section class="subscribe subscribe--news">).
     It carries on over the news section's paper instead of starting a new white band, is centred like the
     news head, and the form sits on a plate with the same solid front edge as the shelf and the cards. */
  .subscribe--news { padding-top: 0; background: var(--bg-alt); }
  .subscribe--news .container { display: grid; justify-items: center; }
  .subscribe--news .subscribe-head { justify-items: center; margin-bottom: var(--space-6); text-align: center; }
  .subscribe--news .lede { margin-inline: auto; }
  .subscribe--news .sub-panel {
    width: min(100%, 64rem); padding: clamp(1.5rem, 3vw, 2.5rem);
    border-radius: 36px; background: var(--bg);
    box-shadow: 0 10px 0 color-mix(in srgb, var(--color-ink) 16%, var(--color-stone)), 0 28px 44px -30px rgb(19 32 26 / 0.35);
  }
  .subscribe--news .field input { background: var(--bg-alt); }
  .subscribe--news .sub-note { text-align: center; }
  @media (max-width: 599.98px) { .subscribe--news .sub-panel { border-radius: 28px; } }

  /* Preview switch (A/B). It sticks to the bottom of the screen while the section is in view and
     rests at the section's end. Remove data-news-switch from the section once a variant is chosen. */
  .news-switch {
    position: sticky; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 40;
    display: flex; align-items: center; gap: 2px; width: fit-content; margin: var(--space-7) auto 0; padding: 4px;
    border-radius: var(--radius-pill); background: var(--color-night); color: var(--color-snow);
    box-shadow: var(--shadow-nav-dark); font: 500 0.875rem/1 var(--font-text);
  }
  .news-switch-label { padding: 0 10px 0 12px; color: var(--color-snow-3); font-size: var(--type-label-size); letter-spacing: var(--type-label-tracking); text-transform: uppercase; }
  .news-switch-btn {
    display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px 0 12px; border: 0;
    border-radius: var(--radius-pill); background: transparent; color: var(--color-snow-2); cursor: pointer;
    transition: background-color var(--duration-hover) var(--ease-hover), color var(--duration-hover) var(--ease-hover);
  }
  .news-switch-key { font: 500 1.25rem/1 var(--font-numeric); padding-top: 0.15em; }
  @media (hover: hover) and (pointer: fine) { .news-switch-btn:hover { background: color-mix(in srgb, var(--color-snow) 10%, transparent); color: var(--color-snow); } }
  .news-switch-btn[aria-pressed="true"] { background: var(--color-lime); color: var(--color-night); }
  .news-switch-btn:focus-visible { outline: var(--line-focus) solid var(--color-lime); outline-offset: 2px; }
  /* Above the bottom bar of the mobile nav */
  @media (max-width: 1023.98px) { .news-switch { bottom: calc(100px + env(safe-area-inset-bottom, 0px)); } }
  @media (max-width: 599.98px) { .news-switch-label { display: none; } }
}