/* Content Creation page: page-only components (tokens from style.css only) */

/* Hero: format pills + floating chip ---------------------------------------- */
.cc-hero__formats {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-top: 2.25rem; padding: 0; list-style: none;
  font-family: var(--f-mono); font-size: var(--fs-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--c-text-muted);
}
.cc-hero__formats li { display: inline-flex; align-items: center; gap: 1rem; }
.cc-hero__formats li + li::before { content: ""; width: 6px; height: 6px; background: var(--c-signal-btn); }
.cc-hero__chip {
  position: absolute; z-index: 4; left: clamp(-1rem, -2vw, -.5rem); bottom: clamp(-1.75rem, -3vw, -1rem);
  display: flex; align-items: center; gap: .85rem; padding: .8rem 1.1rem .8rem .8rem; border-radius: var(--r-card);
}
.cc-hero__chip .icon-tile { width: 44px; height: 44px; border-radius: 10px; }
.cc-hero__chip strong { display: block; font-family: var(--f-display); font-weight: 600; font-size: .92rem; letter-spacing: -.01em; }
.cc-hero__chip small { display: block; font-family: var(--f-mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--c-text-muted); margin-top: .2rem; }
@media (max-width: 559px) { .cc-hero__chip { left: .75rem; bottom: -1.5rem; } }

/* Overview: format strip (contact sheet of four aspect ratios) -------------- */
.cc-formats {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 2.25rem 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end;
}
@media (min-width: 1024px) {
  .cc-formats { grid-template-columns: .78fr 1fr 1fr 1.12fr; gap: clamp(1.25rem, 2.4vw, 2.25rem); }
}
.cc-format { display: grid; gap: .75rem; align-content: end; }
.cc-format__frame {
  position: relative; overflow: hidden; border-radius: var(--r-card); background: var(--c-bg-alt);
  box-shadow: var(--shadow-depth); border: 6px solid var(--c-surface);
}
.cc-format__frame img { width: 100%; height: 100%; object-fit: cover; transition: scale 1s var(--ease-out); }
.cc-format:hover .cc-format__frame img { scale: 1.05; }
.cc-format--reel .cc-format__frame { aspect-ratio: 9 / 16; }
.cc-format--reel .cc-format__frame img { object-position: 42% 50%; }
.cc-format--photo .cc-format__frame { aspect-ratio: 4 / 5; }
.cc-format--photo .cc-format__frame img { object-position: 62% 50%; }
.cc-format--blog .cc-format__frame { aspect-ratio: 3 / 4; }
.cc-format--carousel .cc-format__frame { aspect-ratio: 1 / 1; }
.cc-format__label {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .6rem; margin: .35rem 0 0;
  font-family: var(--f-display); font-weight: 600; font-size: clamp(.98rem, .9rem + .35vw, 1.15rem); letter-spacing: -.01em; line-height: 1.25;
}
.cc-format__label span { font-family: var(--f-mono); font-weight: 500; font-size: .68rem; letter-spacing: .14em; color: var(--c-accent); }
.cc-format__desc { margin: 0; color: var(--c-text-muted); font-size: .92rem; line-height: 1.55; max-width: 34ch; }

/* Blog frame: typographic article mock */
.cc-article {
  display: flex; flex-direction: column; gap: .55rem; padding: clamp(1rem, 2vw, 1.5rem);
  background: var(--c-surface); background-image: radial-gradient(var(--line) 1px, transparent 1px); background-size: 14px 14px;
}
.cc-article__kicker { font-family: var(--f-mono); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--c-accent); }
.cc-article__title { font-family: var(--f-display); font-weight: 800; font-size: clamp(1rem, .8rem + .9vw, 1.6rem); line-height: 1.02; letter-spacing: -.03em; color: var(--c-text); margin-bottom: .35rem; }
.cc-article__line { display: block; height: 7px; border-radius: 2px; background: var(--fill-hover); flex: none; }
.cc-article__line--short { width: 62%; }
.cc-article__img {
  display: block; flex: 1; min-height: 40px; margin-block: .35rem; border-radius: 10px;
  background: url("../../images/podcast-content-recording.webp") center / cover no-repeat, var(--c-bg-alt);
}

/* Carousel frame: stacked slides + dots */
.cc-carousel { overflow: visible; background: transparent; border: 0; box-shadow: none; }
.cc-carousel__ghost {
  position: absolute; inset: 0; border-radius: var(--r-card); background: var(--c-surface); border: 1px solid var(--card-bd);
  box-shadow: var(--shadow-depth); transform: translate(14px, -14px) rotate(3deg); transition: transform .6s var(--ease-out);
}
.cc-carousel__ghost--2 { transform: translate(26px, -26px) rotate(6deg); opacity: .6; }
.cc-carousel__front {
  position: absolute; inset: 0; overflow: hidden; border-radius: var(--r-card); border: 6px solid var(--c-surface); box-shadow: var(--shadow-depth);
}
.cc-carousel__dots { position: absolute; left: 50%; bottom: 14px; translate: -50% 0; display: flex; gap: 6px; z-index: 2; }
.cc-carousel__dots i { width: 6px; height: 6px; background: rgba(255,255,255,.55); }
.cc-carousel__dots i:first-child { width: 18px; background: #fff; }
.cc-format--carousel:hover .cc-carousel__ghost { transform: translate(20px, -18px) rotate(5deg); }
.cc-format--carousel:hover .cc-carousel__ghost--2 { transform: translate(38px, -32px) rotate(9deg); }
@media (max-width: 1023px) {
  .cc-carousel__ghost { transform: translate(8px, -8px) rotate(3deg); }
  .cc-carousel__ghost--2 { transform: translate(14px, -14px) rotate(5deg); }
  .cc-format--carousel { padding-right: 14px; }
}

/* Purpose band (the page's one dark band) ----------------------------------- */
.cc-purpose__list { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--line-strong); }
.cc-purpose__list li {
  position: relative; display: grid; gap: .6rem 2rem; padding-block: clamp(1.75rem, 3.5vw, 2.75rem);
  border-bottom: 1px solid var(--line-strong); grid-template-columns: auto 1fr; align-items: baseline;
}
.cc-purpose__num { font-family: var(--f-mono); font-size: .75rem; letter-spacing: .14em; color: var(--c-accent); }
.cc-purpose__word {
  font-family: var(--f-display); font-weight: 800; font-size: clamp(2.6rem, 1.2rem + 6vw, 6.5rem); line-height: .95; letter-spacing: -.04em;
  transition: color .5s var(--ease-out);
}
.cc-purpose__list p { grid-column: 2; margin: 0; color: var(--c-text-muted); max-width: 46ch; }
.cc-purpose__list li::after {
  content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; background: var(--c-signal);
  transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease-out);
}
@media (hover: hover) {
  .cc-purpose__list li:hover::after { transform: scaleX(1); }
  .cc-purpose__list li:hover .cc-purpose__word { color: var(--c-signal); }
}
@media (min-width: 900px) {
  .cc-purpose__list li { grid-template-columns: 4rem minmax(0, 1fr) minmax(0, 26rem); align-items: center; }
  .cc-purpose__list p { grid-column: 3; }
}

/* Gallery: editorial mosaic -------------------------------------------------- */
.cc-gallery { display: grid; gap: clamp(.75rem, 1.6vw, 1.25rem); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cc-gallery__item--a { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .cc-gallery { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: clamp(180px, 17vw, 250px); }
  .cc-gallery__item { aspect-ratio: auto; height: 100%; }
  .cc-gallery__item--a { grid-column: span 4; grid-row: span 2; }
  .cc-gallery__item--b, .cc-gallery__item--c { grid-column: span 2; }
  .cc-gallery__item--d, .cc-gallery__item--e { grid-column: span 3; }
}
@media (max-width: 559px) {
  .cc-gallery .tag { font-size: .6rem; padding: .25rem .5rem; left: .6rem; top: .6rem; }
  .cc-gallery .reel-card__play { width: 44px; height: 44px; right: .6rem; bottom: .6rem; }
  .cc-gallery__item:not(.cc-gallery__item--a) .tag { display: none; }
}

/* FAQ aside sticks beside the accordion on desktop ---------------------------- */
@media (min-width: 900px) { .cc-faq__aside { position: sticky; top: var(--sticky-top); } }

@media (prefers-reduced-motion: reduce) {
  .cc-format__frame img, .cc-carousel__ghost, .cc-purpose__list li::after, .cc-purpose__word { transition: none; }
}