/**
 * Crescita Studio — Risorse hub (/risorse/) card grid.
 *
 * Loaded only on the /risorse/ Page itself (crescita_risorse_hub_enqueue),
 * never on single guide posts — those keep risorse.css's reading column.
 * Uses Brand Kit tokens only; introduces no new colours, fonts or scales.
 * Redesign 2026-09-22: the page was a wall of paragraphs with hyperlinks that
 * blended into body text. This turns each guide into a thumbnail + eyebrow +
 * hyperlinked headline card (the pattern every article-hub site — TechCrunch,
 * The Verge, DTC blogs — uses so a click is obvious), while keeping the
 * founder-approved spine-plus-three-territories information architecture
 * (decisions.md, Editorial architecture): the grouping and heading level
 * still carry that hierarchy, cards do not change which section a guide
 * belongs to.
 *
 * Centred text (founder direction 2026-09-22): matches the homepage's
 * centred pattern (home.css's hero/section/card text-align:center, e.g.
 * .crescita-home-hero, .crescita-home-pillar, .crescita-home-get-card).
 * The shared .crescita-hero/.crescita-hub-* selectors are left-aligned by
 * default for the pages that still want that (contact, diagnosi, prenota),
 * so this is scoped under body.crescita-page-risorse (crescita_body_class())
 * rather than changing those selectors globally.
 */

/* ── Centred text, this page only ──────────────────────────────────── */

.crescita-page-risorse .crescita-hero__title,
.crescita-page-risorse .crescita-hero__lede {
  margin-inline: auto;
}

.crescita-page-risorse .crescita-hero,
.crescita-page-risorse .crescita-hub-intro,
.crescita-page-risorse .crescita-hub-card__body,
.crescita-page-risorse .crescita-section--dark {
  text-align: center;
}

.crescita-page-risorse .crescita-hub-card__cta,
.crescita-page-risorse .crescita-actions {
  justify-content: center;
}

/* .crescita-container--text (layout.css) only caps its children's width at
   720px — it does not centre that narrower box within the 1160px
   container, so on a wide viewport the closing dark CTA's heading/lede/
   button sat flush against the container's LEFT padding with merely
   centred text inside that off-centre box (screenshot evidence: the block
   was visibly left of viewport-centre). Centre the box itself here. */
.crescita-page-risorse .crescita-section--dark .crescita-container--text > * {
  margin-inline: auto;
}

/* Grid rows with fewer cards than columns (Attrarre pazienti: 1 real card +
   1 "in arrivo"; Visibilità/Sito: 1 "in arrivo" alone) must centre as a
   group, not hug the left edge with dead space on the right — the defect
   the founder flagged from a screenshot.
   A `grid` fix (auto-fit + justify-content:center) looked right but wasn't:
   with fewer children than the container can fit at 360px, auto-fit still
   allocates the extra track(s) and collapses each to 0 width rather than
   omitting it — measured on staging, a 1-card row produced
   `grid-template-columns: 360px 0px`. `justify-content:center` then centres
   the whole 360px-plus-gap TRACK SET, not the card itself, so the visible
   card sits offset left of true centre by half the gap. Grid has no way to
   drop a track it isn't using; flex does, because it never allocates space
   for a child that doesn't exist. */
.crescita-page-risorse .crescita-hub-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.crescita-page-risorse .crescita-hub-card,
.crescita-page-risorse .crescita-hub-card--soon {
  flex: 0 1 360px;
}

/* ── Reduced section rhythm, this page only ──────────────────────────
   .crescita-hero/.crescita-section's shared padding-block is
   var(--space-section) on BOTH sides of the seam (hero's bottom plus the
   next section's top), up to ~240px combined on desktop — an "editorial"
   gap that reads as dead space on a card-hub page meant to feel like a
   dense article index (TechCrunch/The Verge), not a slow-scrolling funnel
   page. Halved here without touching --space-section itself, which other
   pages (home, diagnosi, contact, prenota) still rely on. */
.crescita-page-risorse .crescita-hero {
  padding-bottom: var(--space-lg);
}

.crescita-page-risorse .crescita-section {
  padding-top: var(--space-lg);
  padding-bottom: var(--space-lg);
}

/* ── Section intros: short, not a wall of text ─────────────────────── */

.crescita-hub-intro {
  max-width: var(--width-text);
  margin-inline: auto;
  margin-bottom: var(--space-lg);
}

.crescita-hub-intro > :last-child {
  margin-bottom: 0;
}

/* ── Card grid ──────────────────────────────────────────────────────── */

.crescita-hub-grid {
  display: grid;
  /* min(300px, 100%) rather than a bare 300px: on a narrow phone the
     container's content box can be under 300px, and a bare minmax lower
     bound doesn't shrink past it, causing horizontal overflow of the whole
     page (measured: ~32px at a 374px viewport). */
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: var(--space-lg);
}

.crescita-hub-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  border: var(--border-hairline);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

/* The whole card is the click target: the headline link gets a
   stretched-click area rather than the reader having to aim at the
   underlined words, matching how the reference hubs behave. */
.crescita-hub-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.crescita-hub-card:hover,
.crescita-hub-card:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -12px rgba(15, 23, 34, 0.18);
  border-color: rgba(15, 23, 34, 0.2);
}

.crescita-hub-card__thumb {
  aspect-ratio: 16 / 9;
  width: 100%;
  background: var(--color-bg-alt);
  overflow: hidden;
}

.crescita-hub-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 420ms ease;
}

.crescita-hub-card:hover .crescita-hub-card__thumb img {
  transform: scale(1.035);
}

.crescita-hub-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--space-md);
}

.crescita-hub-card__eyebrow {
  display: block;
  margin-bottom: var(--space-2xs);
}

.crescita-hub-card__title {
  margin: 0 0 var(--space-2xs);
  font-size: var(--text-h3);
  line-height: var(--leading-heading);
}

.crescita-hub-card__title a {
  color: var(--color-heading);
  text-decoration: none;
}

/* Focus-visible must still land on the real link, not the stretched
   pseudo-element, so keyboard users see the standard ring (components.css)
   rather than nothing. */
.crescita-hub-card__title a:focus-visible {
  outline-offset: 3px;
}

.crescita-hub-card:hover .crescita-hub-card__title a,
.crescita-hub-card:focus-within .crescita-hub-card__title a {
  color: var(--color-link);
}

.crescita-hub-card__dek {
  margin: 0 0 var(--space-sm);
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  flex: 1;
}

.crescita-hub-card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-size: var(--text-small);
  font-weight: var(--weight-heading-strong);
  color: var(--color-link);
}

.crescita-hub-card__cta svg {
  width: 14px;
  height: 14px;
  transition: transform var(--transition-base);
}

.crescita-hub-card:hover .crescita-hub-card__cta svg,
.crescita-hub-card:focus-within .crescita-hub-card__cta svg {
  transform: translateX(3px);
}

/* ── "Coming soon" placeholder card ────────────────────────────────── */
/* Visibilità-e-reputazione and sito-e-conversione have no guide yet. A
   dashed, unlinked card sets the expectation without pretending content
   exists — never a fabricated headline. */

.crescita-hub-card--soon {
  border-style: dashed;
  border-color: var(--color-border);
  background: transparent;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  text-align: center;
  padding: var(--space-lg);
  color: var(--color-text-secondary);
}

.crescita-hub-card--soon:hover {
  transform: none;
  box-shadow: none;
}

.crescita-hub-card--soon .crescita-hub-card__soon-label {
  display: block;
  font-size: var(--text-small);
  font-weight: var(--weight-heading-strong);
  color: var(--crescita-fog);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  margin-bottom: var(--space-2xs);
}

@media (prefers-reduced-motion: reduce) {
  .crescita-hub-card,
  .crescita-hub-card__thumb img,
  .crescita-hub-card__cta svg {
    transition: none;
  }
}

/* ── Carousel variant, for a category with more than 3 cards ──────────
   .crescita-hub-grid wraps into extra rows once a category outgrows one
   line, which reads as a long vertical stack on mobile (one 360px card
   per row). This is a straight swap: .crescita-hub-grid becomes
   .crescita-hub-carousel-wrap > .crescita-hub-carousel, same
   .crescita-hub-card markup inside. Applied by hand, per category, once
   it passes 3 real guides — see risorse.html's header comment.

   Native scroll-snap carries mobile: touch swipe needs no JS at all, so
   this degrades to a plain scrollable row with no script. Arrow buttons
   are for pointer input and stay display:none until risorse-hub.js
   confirms there is something to scroll to — a dead, always-visible
   button pair would be worse than none. */

.crescita-hub-carousel-wrap {
  position: relative;
}

.crescita-hub-carousel {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-lg);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--space-sm);
  padding-bottom: var(--space-2xs);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.crescita-hub-carousel::-webkit-scrollbar {
  display: none;
}

.crescita-hub-carousel .crescita-hub-card {
  flex: 0 0 260px;
  scroll-snap-align: start;
}

@media (min-width: 640px) {
  .crescita-hub-carousel .crescita-hub-card {
    flex-basis: 360px;
  }
}

/* Edge fade signals more content off-screen. Decorative only (no text,
   no meaning an assistive tech user would need), and risorse-hub.js
   toggles it off at each natural scroll end via is-at-start/is-at-end. */
.crescita-hub-carousel-wrap::before,
.crescita-hub-carousel-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: var(--space-2xs);
  width: 48px;
  pointer-events: none;
  z-index: 1;
  transition: opacity var(--transition-base);
}

.crescita-hub-carousel-wrap::before {
  left: 0;
  background: linear-gradient(to right, var(--color-bg), transparent);
}

.crescita-hub-carousel-wrap::after {
  right: 0;
  background: linear-gradient(to left, var(--color-bg), transparent);
}

.crescita-hub-carousel-wrap.is-at-start::before,
.crescita-hub-carousel-wrap.is-at-end::after {
  opacity: 0;
}

.crescita-hub-carousel__nav {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  border: var(--border-hairline);
  background: var(--color-bg);
  color: var(--color-heading);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 20px -8px rgba(15, 23, 34, 0.25);
  transition: opacity var(--transition-base);
}

.crescita-hub-carousel-wrap.has-overflow .crescita-hub-carousel__nav {
  display: flex;
}

.crescita-hub-carousel__nav--prev {
  left: -8px;
}

.crescita-hub-carousel__nav--next {
  right: -8px;
}

.crescita-hub-carousel__nav:disabled {
  opacity: 0;
  pointer-events: none;
}

.crescita-hub-carousel__nav svg {
  width: 18px;
  height: 18px;
}

/* Arrows compete with thumbs for space at phone width, and native swipe
   plus the edge fade already say "more content" there without them. */
@media (max-width: 640px) {
  .crescita-hub-carousel__nav {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .crescita-hub-carousel {
    scroll-behavior: auto;
  }
}