/* ============================================================
   SERVICE DETAIL PAGES
   Shared styles for /services/web-design/, /services/brand-identity/,
   /services/print/ and /services/social-media-management/.
   Reuses design tokens and components from style.css / project.css —
   only page-specific pieces (breadcrumb, feature grid, audience note)
   are defined here.
   ============================================================ */

/* ── Breadcrumb back-link, sits above the page-hero eyebrow ── */
.page-hero__back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-b);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.75rem;
  transition: color 0.3s var(--ease);
}
.page-hero__back::before {
  content: '\2190';
}
.page-hero__back:hover {
  color: var(--primary);
}

/* ── "What's Included" feature stack ──
   Base markup (no-JS / reduced-motion fallback) is a plain responsive
   grid. JS (see main.js) turns each card into a sticky, full-width
   panel by adding `.detail-features__stack--active`: as the page
   scrolls, cards pin in place one after another and the ones underneath
   scale down slightly as the next card slides over them. Card colors
   cycle through the Kidashi CI palette; text switches light/dark per
   card to stay readable on each background. */
.detail-features {
  padding-top: var(--section-pad);
  padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--bg);
}
.detail-features__stack {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  max-width: var(--container);
  margin: clamp(2rem, 4vw, 3rem) auto 0;
  padding-inline: var(--gutter);
}
.detail-feature {
  display: flex;
  align-items: center;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  border-radius: 28px;
  background: var(--tone-bg, var(--primary));
  color: var(--tone-fg, var(--cream));
  will-change: transform;
}
.detail-feature__text {
  font-family: var(--font-b);
  font-size: clamp(1.25rem, 2vw, 1.7rem);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: inherit;
}

/* CI color cycle — repeats every 5 cards. Lightness of each background
   decides whether its text/icon reads light (--cream) or dark (--dark). */
.detail-feature:nth-child(5n+1) { --tone-bg: var(--primary);   --tone-fg: var(--cream); }
.detail-feature:nth-child(5n+2) { --tone-bg: var(--dark);      --tone-fg: var(--cream); }
.detail-feature:nth-child(5n+3) { --tone-bg: var(--secondary); --tone-fg: var(--dark); }
.detail-feature:nth-child(5n+4) { --tone-bg: var(--accent2);   --tone-fg: var(--cream); }
.detail-feature:nth-child(5n)   { --tone-bg: var(--accent);    --tone-fg: var(--dark); }

/* ── Sticky stacking scroll (JS-enhanced) ──
   Cards share one containing block, so each one pins at `top` once
   scrolled to and stays pinned — later cards simply paint over it. */
.detail-features__stack--active {
  display: block;
}
.detail-features__stack--active .detail-feature {
  position: sticky;
  width: 100%;
  height: clamp(220px, 24vw, 280px);
}
.detail-features__stack--active .detail-feature:not(:first-child) {
  margin-top: 1.5rem;
}
.detail-features__stack--active .detail-feature:nth-child(1) { top: var(--nav-h); }
.detail-features__stack--active .detail-feature:nth-child(2) { top: calc(var(--nav-h) + 16px); }
.detail-features__stack--active .detail-feature:nth-child(3) { top: calc(var(--nav-h) + 32px); }
.detail-features__stack--active .detail-feature:nth-child(4) { top: calc(var(--nav-h) + 48px); }
.detail-features__stack--active .detail-feature:nth-child(5) { top: calc(var(--nav-h) + 64px); }

/* ── Target-audience note ── */
.detail-audience {
  padding-block: clamp(3rem, 6vw, 5rem);
  background: var(--bg2);
}
.detail-audience__inner {
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}
.detail-audience .eyebrow {
  text-align: center;
}
.detail-audience__text {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  font-weight: 300;
  line-height: 1.75;
  color: var(--text);
}

/* ── "Learn more" link on the services overview cards ── */
.service-full-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1.75rem;
  font-family: var(--font-b);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--primary);
  transition: gap 0.3s var(--ease);
}
.service-full-card__link::after {
  content: '\2192';
  transition: transform 0.3s var(--ease);
}
.service-full-card__link:hover {
  gap: 0.7rem;
}
.service-full-card--core:hover .service-full-card__link {
  color: #1b1e16;
}

/* ── "Relevant Work" case-study links ── */
.detail-relevant {
  padding-block: var(--section-pad);
  background: var(--bg);
}
.detail-relevant__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}
.detail-relevant__card {
  display: block;
  padding: 1.75rem;
  border: 1px solid var(--sand);
  border-radius: 16px;
  background: var(--cream);
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease), background 0.3s var(--ease);
}
.detail-relevant__card:hover {
  border-color: var(--primary);
  background: #ffffff;
  transform: translateY(-4px);
}
.detail-relevant__card-title {
  font-family: var(--font-h);
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--text);
  margin-bottom: 0.5rem;
}
.detail-relevant__card-desc {
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.6;
}

/* ── FAQ accordion (shared with /services/) ── */
.faq {
  padding-block: var(--section-pad);
}
.faq__header {
  text-align: center;
  max-width: 640px;
  margin-inline: auto;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.faq__header .eyebrow {
  text-align: center;
}
.faq__list {
  max-width: 800px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.faq-item {
  border-radius: 14px;
  overflow: hidden;
}
.faq-item__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.4rem 1.6rem;
  text-align: left;
  color: var(--text);
  transition: background-color 0.3s var(--ease);
}
.faq-item__q:hover {
  background: var(--cream);
}
.faq-item.is-open .faq-item__q {
  background: var(--cream);
  border-radius: 14px 14px 0 0;
}
.faq-item__label {
  font-family: var(--font-h);
  font-size: 30px;
  font-weight: 300;
  letter-spacing: 0.01em;
}
.faq-item__icon {
  position: relative;
  flex: none;
  width: 20px;
  height: 20px;
  transition: transform 0.35s var(--ease);
}
.faq-item__icon::before,
.faq-item__icon::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 8px;
  height: 2px;
  background: var(--primary);
}
.faq-item__icon::before {
  left: 2px;
  transform-origin: right center;
  transform: rotate(45deg);
}
.faq-item__icon::after {
  right: 2px;
  transform-origin: left center;
  transform: rotate(-45deg);
}
.faq-item.is-open .faq-item__icon {
  transform: rotate(180deg);
}
.faq-item__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s var(--ease);
}
.faq-item__a > div {
  overflow: hidden;
}
.faq-item__a p {
  padding: 0 1.6rem 1.4rem;
  color: var(--muted);
  max-width: 640px;
}
.faq-item.is-open .faq-item__a {
  grid-template-rows: 1fr;
  background: var(--cream);
  border-radius: 0 0 14px 14px;
}

@media (max-width: 768px) {
  .detail-features__stack {
    grid-template-columns: 1fr;
  }
  .detail-features__stack--active .detail-feature {
    height: clamp(200px, 56vw, 260px);
  }
  .detail-relevant__grid {
    grid-template-columns: 1fr;
  }
  .faq-item__label {
    font-size: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .detail-feature {
    transform: none !important;
  }
  .service-full-card__link:hover {
    gap: 0.4rem;
  }
  .detail-relevant__card:hover {
    transform: none;
  }
}