/* ============================================================
   SANO | Resources Carousel — CSS panel
   ============================================================ */

.sano-rc {
  container-type: inline-size;
  container-name: sano-rc;

  /* ---- MOTION TOKENS — shared across every Sano module ---- */
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --ease-out:  cubic-bezier(0.23, 1, 0.32, 1);
  --dur-reveal: 1000ms;
  --dur-hover: 280ms;
  --reveal-step: 120ms;

  /* ---- TYPOGRAPHY — replace "inherit" with the theme font ---- */
  --rs-font: inherit;

  /* ---- COLOR TOKENS ---- */
  --rs-eyebrow: #F4511E;
  --rs-heading: #0B1B2B;
  --rs-section-bg: #FFFFFF;
  --rs-card-bg: #F6F7F8;
  --rs-card-title: #0B1B2B;
  --rs-card-desc: #5A6472;
  --rs-card-link: #3B2FB5;
  --rs-hover-scale: 1.02;
  --rs-image-zoom: 1.04;

  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding-block: var(--rs-pad-top, 80px) var(--rs-pad-bottom, 80px);
  background: var(--rs-section-bg);
  font-family: var(--rs-font);
}

.sano-rc[data-variant="gray"] {
  --rs-section-bg: #F6F7F8;
  --rs-card-bg: #FFFFFF;
}

.sano-rc__inner {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--rs-max, 1140px);
  margin-inline: auto;
}

/* ---- HEADER ----------------------------------------------
   Body copy is a flat 16px and card titles a flat 22px, on
   every screen. cqi is measured against the whole section, not
   the card, so a clamp shrank them on narrow screens.
----------------------------------------------------------- */
.sano-rc__head {
  text-align: center;
  margin-bottom: clamp(32px, 5cqi, 56px);
}

.sano-rc__eyebrow {
  display: block;
  margin-bottom: 20px;
  color: #0B1B2B;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: normal;
  line-height: 1.5;
  text-transform: none;
}

/* Heading and card title sizes are printed by the require_css
   block in the HTML panel, driven by the Styles tab fields. The
   values below are the fallbacks and must stay in step. */
.sano-rc__heading {
  max-width: 760px;
  margin: 0 auto;
  color: var(--rs-heading);
  font-size: clamp(32px, 4cqi, 36px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.sano-rc__intro {
  max-width: 660px;
  margin: 16px auto 0;
  color: var(--rs-card-desc);
  font-size: 16px;
  line-height: 1.55;
  text-wrap: pretty;
}

/* ---- CAROUSEL TRACK -------------------------------------- */
.sano-rc__track {
  --rc-card-width: calc((100% - 2 * var(--rs-gap, 24px)) / 3);
  position: relative;
  display: flex;
  gap: var(--rs-gap, 24px);
  align-items: stretch;
  /* Leave room for the card hover scale inside the scroll clipping edge.
     The negative margin keeps the cards aligned to the 1140px content grid. */
  margin: -8px;
  padding: 8px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.sano-rc__track.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
  scroll-snap-type: none;
  user-select: none;
}

.sano-rc__track::-webkit-scrollbar { display: none; }

.sano-rc__track:focus-visible {
  outline: 2px solid var(--rs-card-link);
  outline-offset: 4px;
}

@container sano-rc (max-width: 900px) {
  .sano-rc__track { --rc-card-width: calc((100% - var(--rs-gap, 24px)) / 2); }
}

@container sano-rc (max-width: 560px) {
  .sano-rc__track {
    --rc-card-width: 100%;
    gap: 16px;
    margin: 0;
    padding-block: 0;
    padding-inline: 40px;
    scroll-padding-inline: 40px;
  }
  .sano-rc__card { scroll-snap-align: center; }
}

/* ---- CARD ------------------------------------------------ */
.sano-rc__card {
  position: relative;              /* anchor for the stretched link */
  display: flex;
  flex-direction: column;
  flex: 0 0 var(--rc-card-width);
  min-width: 0;
  overflow: hidden;
  border-radius: var(--rs-radius, 16px);
  background: var(--rs-card-bg);
  scroll-snap-align: start;
  transition: transform var(--dur-hover) var(--ease-out);
}

/* Place arrows under the center of the card row. */
.sano-rc__controls {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
}

.sano-rc__controls[hidden] { display: none; }

.sano-rc__arrow {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid #0B1B2B;
  border-radius: 50%;
  background: var(--rs-section-bg);
  color: #0B1B2B;
  cursor: pointer;
  transition: background-color 180ms ease, color 180ms ease;
}

.sano-rc__arrow svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sano-rc__arrow:focus-visible {
  outline: 2px solid var(--rs-card-link);
  outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
  .sano-rc__track { cursor: grab; }
  .sano-rc__arrow:hover { background: #0B1B2B; color: #FFFFFF; }
}

.sano-rc__media {
  width: 100%;
  overflow: hidden;                /* clips the zoom */
}

.sano-rc__media img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 500ms var(--ease-soft);
}

.sano-rc__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;                  /* lets the link sit at the bottom */
  padding: 24px 26px 28px;
}

.sano-rc__title {
  margin: 0 0 10px;
  color: var(--rs-card-title);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.3;
  text-wrap: balance;
}

.sano-rc__desc {
  margin: 0;
  color: var(--rs-card-desc);
  font-size: 16px;
  line-height: 1.55;
  text-wrap: pretty;
}

/* margin-top:auto pins every link to the bottom, so they line up
   across cards even when the descriptions differ in length */
.sano-rc__link {
  margin-top: auto;
  padding-top: 28px;
  color: var(--rs-card-link);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  transition: opacity .18s ease;
}

/* ---- STRETCHED LINK ---------------------------------------
   Makes the whole card clickable without nesting links, so the
   markup stays valid and screen readers announce one link.
----------------------------------------------------------- */
.sano-rc__card.is-clickable .sano-rc__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.sano-rc__card.is-clickable { cursor: grab; }
.sano-rc__link { cursor: pointer; }
.sano-rc__track.is-dragging .sano-rc__card,
.sano-rc__track.is-dragging .sano-rc__link { cursor: grabbing; }

.sano-rc__link:focus-visible {
  outline: 2px solid var(--rs-card-link);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---- SCROLL REVEAL ----------------------------------------
   The hidden state only applies once JS adds .is-ready, so the
   content can never disappear if the script fails to run.

   The selector list below MUST stay character-for-character
   identical to the one in the JS panel. Anything the CSS hides
   and the JS never tags stays invisible forever.

   No transition on the hidden state: applying .is-ready must
   hide instantly, not fade the content out first.
----------------------------------------------------------- */
.sano-rc.is-ready .sano-rc__eyebrow,
.sano-rc.is-ready .sano-rc__heading,
.sano-rc.is-ready .sano-rc__intro {
  opacity: 0;
  transform: translateY(24px);
}

/* The delay lives here, on the state the element transitions
   INTO — that is what makes them arrive one after another.
   Putting it on the hidden state instead does nothing. */
.sano-rc.is-ready .sano-rc__eyebrow.is-visible,
.sano-rc.is-ready .sano-rc__heading.is-visible,
.sano-rc.is-ready .sano-rc__intro.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-reveal) var(--ease-soft),
              transform var(--dur-reveal) var(--ease-soft);
  transition-delay: calc(var(--i, 0) * var(--reveal-step));
}

/* ---- HOVER ------------------------------------------------
   Gated behind a real pointer. On touch, :hover fires on tap and
   stays stuck until you tap elsewhere.
----------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  .sano-rc__card:hover {
    transform: scale(var(--rs-hover-scale, 1.02));
    transition: transform var(--dur-hover) var(--ease-out);
    transition-delay: 0s;
    z-index: 1;                    /* keeps it above its neighbour */
  }

  .sano-rc__card:hover .sano-rc__media img {
    transform: scale(var(--rs-image-zoom, 1.04));
  }

  .sano-rc__link:hover { text-decoration: underline; opacity: .85; }
}

/* ---- REDUCED MOTION ---------------------------------------
   Zeroing the tokens is enough: every timing above is built
   from them, so nothing is left animating. */
@media (prefers-reduced-motion: reduce) {
  .sano-rc {
    --dur-reveal: 1ms;
    --dur-hover: 1ms;
    --reveal-step: 0ms;
  }

  .sano-rc__media img { transition: none; }
  .sano-rc__track { scroll-behavior: auto; }
  .sano-rc__arrow { transition: none; }

  .sano-rc.is-ready .sano-rc__eyebrow,
  .sano-rc.is-ready .sano-rc__heading,
  .sano-rc.is-ready .sano-rc__intro {
    opacity: 1;
    transform: none;
  }

  .sano-rc__card:hover { transform: none; }
  .sano-rc__card:hover .sano-rc__media img { transform: none; }
}

/* ---- Fallback for browsers without container queries ------ */
@supports not (container-type: inline-size) {
  @media (max-width: 1140px) {
    .sano-rc__inner { padding-inline: 32px; }
  }
  @media (max-width: 900px) {
    .sano-rc__track { --rc-card-width: calc((100% - var(--rs-gap, 24px)) / 2); }
  }
  @media (max-width: 560px) {
    .sano-rc__inner { padding-inline: 16px; }
    .sano-rc__track {
      --rc-card-width: 100%;
      gap: 16px;
      margin: 0;
      padding-block: 0;
      padding-inline: 40px;
      scroll-padding-inline: 40px;
    }
    .sano-rc__card { scroll-snap-align: center; }
  }
}

/* Mobile spacing and text containment, 2026-09-29. */
@media (max-width: 767px) {
  .sano-rc { padding-block: 48px; }
  .sano-rc__inner { padding-inline: 16px; }
  .sano-rc__head { margin-bottom: 32px; }
}