/* ── ita_categories_teaser ──────────────────────────────────────────
   Kicker/title/intro, a "See all" toggle button below the body copy,
   then a photo-card grid collapsed to zero height until opened (see
   shared/site.js for the open/close + phone-navigates-instead logic).
   Card grid styling carried over unchanged from the old ita_photo_cards.
   Tokens only. */

.block-ita_categories_teaser .cec-head { position: relative; }
.block-ita_categories_teaser .cec-all { position: absolute; top: 4px; right: 0; }

/* ── Toggle button ─────────────────────────────────────────────────── */
.block-ita_categories_teaser .cec-toggle {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 6px;
}
.block-ita_categories_teaser .cec-toggle-icon {
  width: 9px; height: 9px; flex: none;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform .25s ease;
}
.block-ita_categories_teaser.is-open .cec-toggle-icon { transform: rotate(-135deg); }

/* ── Collapsible panel ─────────────────────────────────────────────── */
.block-ita_categories_teaser .cec-panel {
  max-height: 0; overflow: hidden;
  transition: max-height .5s ease, opacity .3s ease;
  opacity: 0;
}
.block-ita_categories_teaser.is-open .cec-panel {
  max-height: 6000px;
  opacity: 1;
}
.block-ita_categories_teaser .cec-panel .cec-grid { padding-top: 34px; }
/* Editor always shows every card, regardless of open/closed state, so
   nothing is ever hidden from whoever is editing the block. */
body.cms-edit .block-ita_categories_teaser .cec-panel { max-height: none !important; opacity: 1 !important; }

.block-ita_categories_teaser .cec-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
@media (max-width: 900px) {
  .block-ita_categories_teaser .cec-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .block-ita_categories_teaser .cec-grid { grid-template-columns: 1fr; }
}

.block-ita_categories_teaser .cec-card {
  display: block; position: relative; overflow: hidden;
  aspect-ratio: 8 / 3;
  background: var(--color-dark-bg);
  border-radius: 0;
  padding: 0;
  color: #fff;
  transition: transform .2s ease, box-shadow .2s ease;
}
.cec-card:hover { transform: translateY(-5px); box-shadow: 0 18px 36px rgba(2,30,62,.18); }

.block-ita_categories_teaser .cec-icon {
  position: absolute; inset: 0; margin: 0; border-radius: 0;
  width: auto; height: auto;
  display: flex; align-items: center; justify-content: center;
}
/* cycle background tint (fallback state only — no photo set) */
.block-ita_categories_teaser .cec-card:nth-child(3n+1) .cec-icon--empty { background: rgba(252,176,2,.22); }
.block-ita_categories_teaser .cec-card:nth-child(3n+2) .cec-icon--empty { background: rgba(232,21,28,.18); }
.block-ita_categories_teaser .cec-card:nth-child(3n+3) .cec-icon--empty { background: rgba(2,141,152,.18); }
.block-ita_categories_teaser .cec-icon .shape { display: none; }
.block-ita_categories_teaser .cec-card:nth-child(3n+1) .cec-icon .sq  { display: inline-block; }
.block-ita_categories_teaser .cec-card:nth-child(3n+2) .cec-icon .ci  { display: inline-block; }
.block-ita_categories_teaser .cec-card:nth-child(3n+3) .cec-icon .tri { display: inline-block; }

/* ── Photo variant — image fills the entire card ── */
.block-ita_categories_teaser .cec-icon--photo {
  background: var(--color-surface); overflow: hidden;
}
.block-ita_categories_teaser .cec-icon--photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s ease;
}
.cec-card:hover .cec-icon--photo img { transform: scale(1.06); }

/* ── Bottom gradient scrim — always present so the heading stays
   readable over any photo; deepens further on hover to make room
   for the description. ── */
.block-ita_categories_teaser .cec-overlay {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 24px 22px 20px;
  background: linear-gradient(180deg, rgba(2,30,62,0) 0%, rgba(2,30,62,.5) 48%, rgba(2,30,62,.94) 100%);
  transition: background .25s ease;
  /* On these short (8:3) cards the overlay's own box covers most of
     the card height, sitting above the photo in z-index — without
     this, clicks meant for the photo underneath (to replace it in the
     editor) land on the overlay's padding instead and go nowhere.
     Pass clicks through the overlay itself; re-enable them on its
     actual text children so headline/meta stay independently editable. */
  pointer-events: none;
}
.block-ita_categories_teaser .cec-overlay > * { pointer-events: auto; }
.cec-card:hover .cec-overlay {
  background: linear-gradient(180deg, rgba(2,30,62,.15) 0%, rgba(2,30,62,.75) 35%, rgba(2,30,62,.96) 100%);
}

/* ── Empty-state hint (editor only) — click-to-upload affordance ── */
.cec-icon-hint { display: none; }
body.cms-edit .block-ita_categories_teaser .cec-icon--empty {
  border: 1.5px dashed rgba(255,255,255,.35);
  cursor: pointer; flex-direction: column; gap: 8px;
}
body.cms-edit .block-ita_categories_teaser .cec-icon--empty .cec-icon-shapes {
  display: flex; gap: 4px; opacity: .6;
}
body.cms-edit .block-ita_categories_teaser .cec-icon-hint {
  display: block; font-size: 11.5px; font-weight: 700; color: rgba(255,255,255,.75);
  text-transform: uppercase; letter-spacing: .04em;
}
body.cms-edit .block-ita_categories_teaser .cec-icon--empty:hover {
  border-color: var(--color-accent);
}

.block-ita_categories_teaser .cec-tag {
  font-family: var(--font-eyebrow); font-weight: 700; font-size: 12px; color: var(--color-accent);
  letter-spacing: .08em; text-transform: uppercase; margin-bottom: 8px; display: block;
}
.block-ita_categories_teaser .cec-headline {
  font-size: 19.5px; margin-bottom: 0; color: #fff;
  transition: margin-bottom .25s ease;
}
.cec-card:hover .cec-headline { margin-bottom: 8px; }
.block-ita_categories_teaser .cec-meta {
  font-size: 13.5px; color: rgba(255,255,255,.85); margin: 0;
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .3s ease, opacity .25s ease;
}
.cec-card:hover .cec-meta { max-height: 120px; opacity: 1; }

.block-ita_categories_teaser .cec-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.block-ita_categories_teaser .cec-tags span {
  font-size: 11.5px; font-weight: 600; padding: 5px 10px; border-radius: 6px;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); color: #fff;
}

.block-ita_categories_teaser .cec-outro { margin-top: 30px; max-width: 680px; }