/* ============================================================
   site.css — The Camán Shed, page-specific layout.
   Reuses framework components; adds only what's unique to this
   site. Custom classes are prefixed .cs- (Camán Shed) to stay
   out of the shared component namespace. Every value still a token.
   ============================================================ */

h1, h2, h3, .cs-display {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: var(--leading-tight);
}
.nav__brand { font-family: var(--font-display); font-weight: 700; }

.eyebrow { color: var(--color-brand); display: inline-flex; align-items: center; gap: var(--space-2);
  text-transform: uppercase; letter-spacing: 0.1em; font-size: var(--text-xs); font-weight: var(--weight-bold); }
.eyebrow::before { content: ""; width: 1.5rem; height: 2px; background: var(--brand-leather); border-radius: var(--radius-full); }

/* ---- Hero ----------------------------------------------------
   Text left; a crossed-camán + sliotar SVG right. Stacks on
   mobile with the art behind the words. */
.cs-hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(120% 90% at 85% 8%, var(--brand-leather-soft) 0%, transparent 55%),
    linear-gradient(180deg, #FBF6EC 0%, var(--color-bg) 70%);
  border-bottom: 1px solid var(--color-border);
}
.cs-hero__inner {
  display: grid; gap: var(--space-12); align-items: center;
  grid-template-columns: 1.1fr 0.9fr;
  padding-block: var(--space-24) var(--space-16);
}
.cs-hero__title { font-size: clamp(2.4rem, 6vw, var(--text-4xl)); margin: var(--space-4) 0; }
.cs-hero__title em { font-style: italic; color: var(--color-brand); }
.cs-hero__lead { font-size: var(--text-lg); color: var(--color-text-muted); max-width: 34rem; }
.cs-hero__actions { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-8); }
.cs-hero__art { position: relative; display: grid; place-items: center; min-height: 18rem; }
.cs-hero__art svg { width: 100%; max-width: 26rem; height: auto; }
@media (max-width: 820px) {
  .cs-hero__inner { grid-template-columns: 1fr; padding-block: var(--space-16) var(--space-12); }
  .cs-hero__art { order: -1; opacity: 0.95; }
}

.cs-offer { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); align-items: center;
  color: var(--color-text-muted); font-size: var(--text-sm); }
.cs-offer span { display: inline-flex; align-items: center; gap: var(--space-2); }
.cs-offer .ico { color: var(--color-brand); }

.cs-section { padding-block: var(--space-16); }
.cs-section__head { max-width: var(--max-width-prose); margin-bottom: var(--space-12); }
.cs-section__head p { color: var(--color-text-muted); margin-top: var(--space-3); }

/* ---- Repair service cards -------------------------------------- */
.cs-services { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.cs-service { display: grid; gap: var(--space-3); align-content: start; }
.cs-service__title { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.cs-service__name { font-family: var(--font-display); font-size: var(--text-xl); }
.cs-service__body { color: var(--color-text-muted); font-size: var(--text-sm); }

/* ---- Price menu -------------------------------------------------- */
.cs-menu { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.cs-menu caption { text-align: left; color: var(--color-text-muted); margin-bottom: var(--space-4); }
.cs-menu th, .cs-menu td { text-align: left; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); }
.cs-menu thead th { font-weight: var(--weight-medium); color: var(--color-text-muted);
  text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--text-xs); }
.cs-menu tbody tr:hover { background: var(--color-surface); }
.cs-menu__price { font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; font-weight: var(--weight-medium); }
.cs-menu__time { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--color-text-muted); }
.cs-menu__name { font-weight: var(--weight-medium); }
@media (max-width: 640px) { .cs-menu .cs-hide-sm { display: none; } }

/* ---- Shop / consumables grid ------------------------------------ */
.cs-shop { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.cs-item { display: grid; gap: var(--space-2); align-content: start; background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-5); }
.cs-item__name { font-family: var(--font-display); font-size: var(--text-lg); }
.cs-item__price { color: var(--color-brand); font-weight: var(--weight-medium); font-size: var(--text-sm); }
.cs-item__body { color: var(--color-text-muted); font-size: var(--text-sm); }

/* ---- Vinted spotlight band --------------------------------------- */
.cs-band { background: var(--color-brand); color: #F3F6EF; border-radius: var(--radius-lg); overflow: hidden; }
.cs-band__inner { display: grid; gap: var(--space-12); grid-template-columns: 1.3fr 1fr; align-items: center;
  padding: var(--space-16); }
.cs-band h2 { color: #FBF9F1; }
.cs-band p { color: #DCE6D4; }
.cs-band .eyebrow { color: var(--brand-leather-soft); }
.cs-band .eyebrow::before { background: var(--brand-leather); }
.cs-band__card { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--radius-md); padding: var(--space-6); display: grid; gap: var(--space-4); justify-items: start; }
.cs-band__badge { display: inline-flex; align-items: center; gap: var(--space-2); background: #FFFFFF; color: #094F45;
  font-weight: var(--weight-bold); font-size: var(--text-sm); padding: var(--space-2) var(--space-4); border-radius: var(--radius-full); }

/* ---- Quote: WhatsApp card + enquiry form ------------------------- */
.cs-quote { display: grid; gap: var(--space-16); grid-template-columns: 1fr 1fr; align-items: start; }
@media (max-width: 900px) { .cs-quote { grid-template-columns: 1fr; gap: var(--space-12); } }
.cs-whatsapp { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: var(--space-8); display: grid; gap: var(--space-4); justify-items: start; height: 100%; }
.cs-whatsapp__icon { width: 3rem; height: 3rem; color: #25D366; flex-shrink: 0; }
.cs-whatsapp__body { color: var(--color-text-muted); font-size: var(--text-sm); max-width: 26rem; }

/* ---- Visit ------------------------------------------------------- */
.cs-visit { display: grid; gap: var(--space-12); grid-template-columns: 1fr 1.2fr; align-items: start; }
@media (max-width: 820px) { .cs-visit { grid-template-columns: 1fr; } }
.cs-hours { display: grid; gap: var(--space-2); font-size: var(--text-sm); }
.cs-hours div { display: flex; justify-content: space-between; gap: var(--space-6); padding-block: var(--space-1);
  border-bottom: 1px dashed var(--color-border); }
.cs-hours dt { color: var(--color-text); }
.cs-hours dd { margin: 0; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }

/* ---- Section divider stroke (workshop bench line) ----------------- */
.cs-stroke { display: block; width: 100%; height: 36px; margin: var(--space-8) 0; color: var(--brand-leather); }
.cs-stroke svg { width: 100%; height: 100%; }