/* ─────────────────────────────────────────────────────────────
   CollectionStories — Figma "Curated Collections" (1440 ref,
   section y4724 h947). Heading --text-d60 + subtitle --text-d30,
   then three cards in a row: 348 / 493 / 348 with 21px gaps and
   656px card height at 1440. Each card is fully clickable with an
   uppercase white label centered near its bottom edge.
   ───────────────────────────────────────────────────────────── */

.cc_LmUd6PvvAN_odbnw69kpa .colstories {
  width: 100%;
  padding: clamp(36px, 4.219vw, 81px) 0 clamp(32px, 2.708vw, 52px);
  color: var(--cs-text, var(--color-black));
}

.cc_LmUd6PvvAN_odbnw69kpa .colstories__inner {
  /* Figma content inset x104..x1335 → 1231px content, centered. */
  max-width: calc(1748px + 2 * clamp(16px, 4.479vw, 86px));
  margin-inline: auto;
  padding-inline: clamp(16px, 4.479vw, 86px);
}

/* ── Header ── */
/* Figma: subtitle ends ~y180, cards start y210 → ~30px gap. */
.cc_LmUd6PvvAN_odbnw69kpa .colstories__head {
  margin-bottom: clamp(24px, 3.333vw, 64px); /* sub 214 -> cards 278 */
}
.cc_LmUd6PvvAN_odbnw69kpa .colstories__eyebrow {
  display: block;
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--cs-accent, var(--color-accent));
  margin-bottom: 14px;
}
/* Figma: "Curated Collections" 60px Manrope Regular, black, +2px tracking. */
.cc_LmUd6PvvAN_odbnw69kpa .colstories__heading {
  font-family: var(--font-display);
  font-size: var(--text-d60);
  font-weight: 400;
  line-height: 1.3667; /* 82/60 @1440 */
  letter-spacing: 0.0333em; /* 2px @60px */
  margin: 0;
}
/* Figma: "İmza koleksiyonlar" 30px Manrope Medium, black (inherits --cs-text),
   +2px tracking. The Figma text frame spans the full content row (1269.94px),
   so the copy is not capped to a narrow measure. */
.cc_LmUd6PvvAN_odbnw69kpa .colstories__sub {
  font-family: var(--font-body);
  font-size: var(--text-d30);
  font-weight: 500;
  line-height: 1.3667; /* 41/30 @1440 */
  letter-spacing: 0.0667em; /* 2px @30px */
  margin: clamp(8px, 0.694vw, 10px) 0 0;
}

/* Header alignment (data-align) */
.cc_LmUd6PvvAN_odbnw69kpa .colstories__head[data-align="center"] {
  text-align: center;
}
.cc_LmUd6PvvAN_odbnw69kpa .colstories__head[data-align="center"] .colstories__sub {
  margin-inline: auto;
}
.cc_LmUd6PvvAN_odbnw69kpa .colstories__head[data-align="right"] {
  text-align: right;
}
.cc_LmUd6PvvAN_odbnw69kpa .colstories__head[data-align="right"] .colstories__sub {
  margin-left: auto;
}

/* ── Cards ── */
/* Mobile-first: stacked column. */
.cc_LmUd6PvvAN_odbnw69kpa .colstories__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
}
.cc_LmUd6PvvAN_odbnw69kpa .colstories__card {
  position: relative;
  min-width: 0;
}
.cc_LmUd6PvvAN_odbnw69kpa .colstories__card-link {
  position: relative;
  display: block;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}
.cc_LmUd6PvvAN_odbnw69kpa .colstories__card-img, .cc_LmUd6PvvAN_odbnw69kpa .colstories__card-ph {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  background: var(--color-surface-alt);
}
/* The zoom hangs off the CARD, not off `a.colstories__card-link`: a card whose
   link prop is empty renders a <div> instead of an <a>, so the anchor-scoped
   rule silently skipped it — which is why "THE COMMUTE" sat still while its two
   neighbours animated. Keyboard focus still keys off the anchor, since only a
   linked card is focusable. */
.cc_LmUd6PvvAN_odbnw69kpa .colstories__card-img {
  transform: scale(var(--cs-card-zoom, 1));
  transition: transform 0.6s ease;
}
.cc_LmUd6PvvAN_odbnw69kpa .colstories__card:hover .colstories__card-img, .cc_LmUd6PvvAN_odbnw69kpa a.colstories__card-link:focus-visible .colstories__card-img {
  transform: scale(var(--cs-card-hover-zoom, 1.04));
}
.cc_LmUd6PvvAN_odbnw69kpa a.colstories__card-link:focus-visible {
  outline: 2px solid var(--cs-text, var(--color-black));
  outline-offset: 2px;
}

/* Label — Figma: bare 25px Manrope Bold WHITE text, centered across the full
   card width. Text top y568 inside the 656px card, so the 34px line box ends
   54px above the card's bottom edge (54/656 = 8.23%). No plate/background. */
.cc_LmUd6PvvAN_odbnw69kpa .colstories__card-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12.13%; /* 91/750 @1920 */
  text-align: center;
  color: var(--kombos-white);
  font-family: var(--font-label);
  font-size: var(--text-d25);
  font-weight: 700;
  line-height: 1.36; /* 34/25 @1440 */
  letter-spacing: 0.08em; /* 2px @25px */
  text-transform: uppercase;
  padding-inline: var(--space-sm);
}

/* The CTA ("Keşfet") is a hover reveal: at rest the card shows only its label,
   and pointing at the card fades the CTA in while the label lifts to make room.
   Both positions are the same percentages as before — only the resting state
   changed, so a card with a CTA looks identical to one without until hovered. */
.cc_LmUd6PvvAN_odbnw69kpa .colstories__card-label {
  transition: bottom 0.45s ease;
}
.cc_LmUd6PvvAN_odbnw69kpa .colstories__card:hover .colstories__card-link--has-cta .colstories__card-label, .cc_LmUd6PvvAN_odbnw69kpa a.colstories__card-link--has-cta:focus-visible .colstories__card-label {
  bottom: 14.5%;
}

.cc_LmUd6PvvAN_odbnw69kpa .colstories__card-cta {
  position: absolute;
  left: 50%;
  bottom: 7.25%;
  transform: translateX(-50%) translateY(0.5rem);
  opacity: 0;
  /* The whole card is the link, so the CTA never needs to catch the click. */
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.45s ease;
  width: max-content;
  max-width: calc(100% - 32px);
  color: var(--kombos-white);
  font-family: var(--font-label);
  font-size: var(--text-label);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  border-bottom: 1px solid currentColor;
}
.cc_LmUd6PvvAN_odbnw69kpa .colstories__card:hover .colstories__card-cta, .cc_LmUd6PvvAN_odbnw69kpa a.colstories__card-link:focus-visible .colstories__card-cta {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Touch devices never fire hover — keep the CTA permanently visible there. */
@media (hover: none) {
  .cc_LmUd6PvvAN_odbnw69kpa .colstories__card-link--has-cta .colstories__card-label {
    bottom: 14.5%;
  }
  .cc_LmUd6PvvAN_odbnw69kpa .colstories__card-cta {
    opacity: 1;
    transform: translateX(-50%);
  }
}

/* `grid` is the full-bleed editorial variant used on the homepage. The
   heading keeps the normal SUMONE content width while campaign cards extend
   edge-to-edge on every viewport. */
.cc_LmUd6PvvAN_odbnw69kpa .colstories--grid {
  padding-bottom: 0;
}

.cc_LmUd6PvvAN_odbnw69kpa .colstories--grid .colstories__inner {
  max-width: none;
  padding-inline: 0;
}

.cc_LmUd6PvvAN_odbnw69kpa .colstories--grid .colstories__head {
  max-width: calc(1748px + 2 * clamp(16px, 4.479vw, 86px));
  margin-inline: auto;
  padding-inline: clamp(16px, 4.479vw, 86px);
}

.cc_LmUd6PvvAN_odbnw69kpa .colstories--grid .colstories__cards {
  gap: 0;
}

.cc_LmUd6PvvAN_odbnw69kpa .colstories--grid .colstories__card-label {
  bottom: 0;
  color: var(--kombos-white);
  padding: clamp(72px, 8vw, 128px) clamp(20px, 3vw, 48px) clamp(20px, 2.5vw, 40px);
  background: linear-gradient(to top, rgba(0, 0, 0, 0.52), rgba(0, 0, 0, 0));
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.42);
}

.cc_LmUd6PvvAN_odbnw69kpa .colstories--grid .colstories__card:hover .colstories__card-link--has-cta .colstories__card-label, .cc_LmUd6PvvAN_odbnw69kpa .colstories--grid a.colstories__card-link--has-cta:focus-visible .colstories__card-label {
  bottom: 7%;
}

@media (hover: none) {
  .cc_LmUd6PvvAN_odbnw69kpa .colstories--grid .colstories__card-link--has-cta .colstories__card-label {
    bottom: 7%;
  }
}

.cc_LmUd6PvvAN_odbnw69kpa .colstories--grid .colstories__card-cta {
  bottom: clamp(18px, 2.25vw, 36px);
}

/* ── Desktop (>=1024): Figma three-in-a-row ── */
@media (min-width: 1024px) {
  .cc_LmUd6PvvAN_odbnw69kpa .colstories__card-img, .cc_LmUd6PvvAN_odbnw69kpa .colstories__card-ph {
    aspect-ratio: var(--cs-image-aspect-ratio, 1 / 1);
  }

  .cc_LmUd6PvvAN_odbnw69kpa .colstories__cards {
    /* 21px gap at 1440, fluid below. */
    gap: clamp(24px, 4.375vw, 84px); /* 84 @1920 */
    align-items: start;
  }
  /* 348 / 493 / 348 column ratio (≈ 1fr 1.42fr 1fr, exact via fr weights). */
  .cc_LmUd6PvvAN_odbnw69kpa .colstories__cards[data-count="3"] {
    grid-template-columns: 480fr 620fr 480fr; /* @1920 */
  }
  /* Figma card box: 348×656 on the sides, 493×656 in the middle — far taller
     than any option in the "Görsel Oranı" picker, so the Figma three-up row
     pins its own ratios. The column weights make all three land on the same
     656px height at 1440. Other card counts keep the editor ratio. */
  .cc_LmUd6PvvAN_odbnw69kpa .colstories:not(.colstories--grid) .colstories__cards[data-count="3"] .colstories__card-img, .cc_LmUd6PvvAN_odbnw69kpa .colstories:not(.colstories--grid) .colstories__cards[data-count="3"] .colstories__card-ph {
    aspect-ratio: 480 / 750;
  }
  .cc_LmUd6PvvAN_odbnw69kpa .colstories:not(.colstories--grid) .colstories__cards[data-count="3"] .colstories__card--wide .colstories__card-img, .cc_LmUd6PvvAN_odbnw69kpa .colstories:not(.colstories--grid) .colstories__cards[data-count="3"] .colstories__card--wide .colstories__card-ph {
    aspect-ratio: 620 / 750;
  }
  .cc_LmUd6PvvAN_odbnw69kpa .colstories__cards[data-count="2"] {
    grid-template-columns: 1fr 1fr;
  }
  .cc_LmUd6PvvAN_odbnw69kpa .colstories__cards[data-count="1"] {
    grid-template-columns: minmax(0, 493px);
    justify-content: center;
  }
  /* Editorial grid: two edge-to-edge campaign frames inspired by the concise
     Mango/Zara homepage rhythm. The section heading remains in the SUMONE
     container while the campaign photography reaches the viewport edges. */
  .cc_LmUd6PvvAN_odbnw69kpa .colstories--grid .colstories__cards[data-count="2"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cc_LmUd6PvvAN_odbnw69kpa .colstories--grid .colstories__card-label {
    color: var(--kombos-white);
  }
}

/* Fixed desktop canvas — Figma 504:364, 1920×1080. */
@media (min-width: 1024px) {
  .cc_LmUd6PvvAN_odbnw69kpa .colstories:not(.colstories--grid) {
    box-sizing: border-box;
    height: var(--sumone-section-height, 56.25vw);
    padding: clamp(36px, 4.219vw, 81px) 0 clamp(32px, 2.708vw, 52px);
  }
  .cc_LmUd6PvvAN_odbnw69kpa .colstories:not(.colstories--grid) .colstories__inner {
    width: min(1748px, calc(100% - 2 * clamp(16px, 4.479vw, 86px)));
    max-width: none;
    padding-inline: 0;
  }
  .cc_LmUd6PvvAN_odbnw69kpa .colstories:not(.colstories--grid) .colstories__head {
    margin-bottom: clamp(24px, 3.333vw, 64px);
  }
  .cc_LmUd6PvvAN_odbnw69kpa .colstories:not(.colstories--grid) .colstories__cards {
    gap: clamp(24px, 4.375vw, 84px);
  }
}