/* ==========================================================================
   main.css — Carol Flores Hair & Makeup
   Project styles only: base.css (engine) stays untouched. Everything here
   consumes tokens.css. Ported from the previous site's assets/css/main.css
   (guia-ui-webdesign-carol-flores.md §7) onto the engine's class contract —
   new component classes (.hero, .split, .grid, .card, .gallery-strip,
   .media-placeholder, .cta-final, .checklist) plus a few explicit overrides
   of engine defaults (button radius, nav underline, header logo size),
   documented inline where they diverge from _template/ behaviour.
   ========================================================================== */

/* ---------- Type ----------
   Google Fonts CDN import — a deliberate, documented exception to the
   engine's zero-CDN default. No font files were provided in inputs/ and this
   build session has no way to download/self-host them (see website-dev's
   delivery notes). Functionally identical to the previous site. Follow-up:
   self-host these 5 weights in assets/fonts/fonts.css when font files are
   available, per the UI guide §3.1/§14 recommendation. Weight 300 dropped —
   confirmed unused in any rule (guide §3.1). */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');

/* ---------- Heading override ----------
   This brand's H3 is always inside a card (specialty grids) and is smaller
   than base.css's default --text-2xl — guide §4. */
.card h3 { font-size: var(--text-xl); margin-bottom: 0.3rem; }

/* ---------- Buttons ----------
   Brand signature: every button is a pill. base.css's default .button uses
   --radius-md (a card radius on this project, 20px) — override explicitly. */
.button { border-radius: var(--radius-full); }

/* Ghost button for use on dark/photo backgrounds (hero). White is literal
   here on purpose: this context (always-dark hero) never changes between
   themes, so there is no light/dark pair to declare — guide §7.1. */
.button--on-dark {
  background: transparent;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.5);
}
.button--on-dark:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #ffffff;
}

/* ---------- Nav ----------
   Underline on hover/active — base.css only recolors the text by default. */
.site-nav__link {
  border-bottom: 2px solid transparent;
  padding-block: 0.4rem 0;
}
.site-nav__link:hover,
.site-nav__link.is-active {
  border-bottom-color: var(--color-accent);
}

/* ---------- Header ----------
   68px brand lockup (vs. the engine default 40px) — --header-height was
   raised to 6rem in tokens.css to fit it. Guide §3.3/§6. */
.site-header__logo { height: var(--logo-height); width: auto; }

/* ---------- WhatsApp widget ----------
   Keep the WhatsApp-official green on the FAB instead of the wine accent —
   a deliberate brand decision, explained in guide §7.6. The component itself
   (assets/css/whatsapp-widget.css) is untouched; these custom properties are
   its own documented override hook. */
.wa-widget {
  --wa-accent: #25d366;
  --wa-accent-hover: #1ebe5a;
  --wa-on-accent: #ffffff;
}

/* ---------- Typography helpers ---------- */
.eyebrow {
  display: block;
  font-size: var(--text-sm);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent);
  font-weight: 500;
  margin-bottom: var(--space-2);
}
.lede {
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  max-width: 620px;
}
.center { text-align: center; }
.center .lede { margin-inline: auto; }
.section-intro { max-width: 640px; margin-inline: auto; }

/* ---------- Section backgrounds ---------- */
.section--surface { background: var(--color-surface); }

/* ---------- Hero (Home only) ----------
   Two-layer slideshow (base + reveal), never one div per photo — see
   assets/js/hero-slideshow.js. Structure and timing ported verbatim from
   the previous site (guide §7.5); behavior unchanged. */
.hero {
  background: var(--color-structure);
  color: var(--color-text-inverse);
  padding-block: var(--space-24) var(--space-20);
  position: relative;
  overflow: hidden;
}
.hero__inner {
  display: grid;
  gap: var(--space-12);
  align-items: center;
  position: relative;
  z-index: 2;
}
.hero h1 {
  color: var(--color-text-inverse);
  font-size: var(--text-hero);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.hero h1 strong { font-weight: 800; color: var(--color-gold); }
.hero .lede { color: var(--color-text-inverse); opacity: 0.78; }
.hero .eyebrow { color: var(--color-gold); }
.hero__actions {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-top: var(--space-6);
}

/* The section itself stays position:relative/simple (not flex/grid) — the
   photo layers (.hero__slides) are absolute against IT, while .hero__inner
   (a normal child, no absolute descendants of its own) is what centers the
   content. Keeps position:absolute out of a flex/grid container. */
.hero--photo {
  position: relative;
  overflow: hidden;
  background-color: var(--color-structure);
}
.hero__slides { position: absolute; inset: 0; z-index: 0; }
.hero__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 15%;
  background-repeat: no-repeat;
}
/* Base: always shows the photo "underneath" — the area not yet covered by
   the reveal curtain. */
.hero__slide--base { z-index: 1; }
/* Reveal: the only layer that animates — starts clipped to 0% visible width
   and opens to 100%, left to right, over the base. Exactly two layers exist
   (never one per photo), so no stale photo can flash mid-transition. */
.hero__slide--reveal {
  z-index: 2;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.6s cubic-bezier(0.65, 0, 0.35, 1);
}
.hero__slide--reveal.is-revealing { clip-path: inset(0 0 0 0); }
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 3;
  /* Brand black directly, not light-dark(): this overlay sits on a surface
     that is already always-dark in both themes (guide §10). */
  background: linear-gradient(100deg,
    rgba(13, 13, 13, 0.94) 0%,
    rgba(13, 13, 13, 0.86) 32%,
    rgba(13, 13, 13, 0.55) 58%,
    rgba(13, 13, 13, 0.22) 82%,
    rgba(13, 13, 13, 0.15) 100%);
}
.hero--photo .hero__inner {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  min-height: 640px;
  max-width: 720px;
}

/* ---------- Split (text + image) ---------- */
.split { display: grid; gap: var(--space-12); align-items: center; }
.split__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
}

/* ---------- Page header band (internal pages) ---------- */
.page-header {
  background: var(--color-surface);
  padding-block: var(--space-12);
  border-bottom: 1px solid var(--color-border);
}

/* ---------- Grid + cards ---------- */
.grid { display: grid; gap: var(--space-6); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--color-base);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.card--photo { display: flex; flex-direction: column; }
.card__photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 12%;
}
.card--photo .card__body { padding: var(--space-6); }
.card--photo p { color: var(--color-text-secondary); margin: 0; font-size: var(--text-sm); }

/* ---------- Gallery strip ---------- */
.gallery-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-12);
}
.gallery-strip img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-soft);
}

/* ---------- Media placeholder ----------
   Honest "not shot yet" marker for Portfólio and Contato — never filled
   with stock or AI-generated imagery (real-result and studio-facade photos
   are both on the image-generation skill's blocked-destination list). */
.media-placeholder {
  border: 1.5px dashed var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-2);
  padding: var(--space-6);
  border-radius: var(--radius-md);
  aspect-ratio: 4 / 5;
  font-size: var(--text-sm);
}
.media-placeholder strong { color: var(--color-text-primary); font-size: var(--text-base); }
.media-placeholder.is-wide { aspect-ratio: 16 / 9; }

/* ---------- Checklist ---------- */
ul.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); }
ul.checklist li { padding-left: 1.6rem; position: relative; }
ul.checklist li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--color-accent);
  font-weight: 700;
}

/* ---------- CTA final band ---------- */
.cta-final {
  background: var(--color-accent);
  color: var(--color-on-accent);
  text-align: center;
  padding-block: var(--space-20);
}
.cta-final h2 { color: var(--color-on-accent); }
.cta-final .lede { color: var(--color-on-accent); opacity: 0.85; max-width: 620px; margin-inline: auto; }
.cta-final .button--primary {
  background-color: var(--color-on-accent);
  color: var(--color-accent);
  border-color: var(--color-on-accent);
}
.cta-final .button--primary:hover {
  background-color: var(--color-surface);
  border-color: var(--color-surface);
  color: var(--color-accent);
}

/* ---------- Utility ---------- */
.mt-lg { margin-top: var(--space-12); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (min-width: 860px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--reverse .split__media { order: 2; }
}
@media (max-width: 859px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .gallery-strip { grid-template-columns: repeat(2, 1fr); }
}