/* ============================================================================
   Chachi Garza Cerámica — landing page stylesheet
   ----------------------------------------------------------------------------
   Loaded AFTER tokens/*.css so it can override token defaults.
   Everything here is either (a) transcribed from the <style> block in
   design-export/landing-page/Chachi Garza Landing.dc.html, or (b) one of the
   three sanctioned changes, or (c) a :hover state that the original expressed
   in React state and this page has to express in CSS because it ships no JS.
   Do not add new design values here. Read them from tokens/.
   ========================================================================== */

/* ── Verbatim from the .dc.html <style> block ─────────────────────────────── */

html { scroll-behavior: smooth }
body { margin: 0; background: var(--cream); overflow-x: hidden }

@media (min-width: 820px) {
  .about-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr) !important; }
}

/* The .dc.html also re-declared every --asset-* custom property. That is
   load-bearing, not a bundler artifact: a url() inside a custom property is
   resolved against the DOCUMENT's base URL, not against the stylesheet that
   declared it. So tokens/shape.css's own url("../assets/…") resolves from
   index.html to /assets/ (404), not to site/assets/. Re-declaring here with a
   path relative to index.html fixes it, and because site.css sits next to
   index.html the path is correct under either resolution rule.
   tokens/shape.css itself stays unmodified. */

:root {
  --asset-squiggle:            url("assets/motif-squiggle.png");
  --asset-squiggle-clay:       url("assets/motif-squiggle-clay.png");
  --asset-squiggle-olive:      url("assets/motif-squiggle-olive.png");
  --asset-squiggle-terracotta: url("assets/motif-squiggle-terracotta.png");
  --asset-glaze:               url("assets/shape-organic-glaze.png");
  --asset-glaze-sage:          url("assets/shape-organic-glaze-sage.png");
  --asset-glaze-clay:          url("assets/shape-organic-glaze-clay.png");
  --asset-glaze-terracotta:    url("assets/shape-organic-glaze-terracotta.png");
  --asset-glaze-cream:         url("assets/shape-organic-glaze-cream.png");
  --asset-wordmark:            url("assets/wordmark-dark.png");
  --asset-wordmark-cream:      url("assets/wordmark-cream.png");
  --asset-wordmark-olive:      url("assets/wordmark-olive.png");
}


/* ── Change 3 of 3: make --fs-h2 fluid ───────────────────────────────────────
   tokens/typography.css fixes it at 32px while every display size uses clamp().
   Desktop value stays exactly 32px (3.2vw reaches 32px at 1000px viewport).
   The override lives here, not in the copied token file. Affects the italic
   pull-quote at the end of the "Conexión humana" section. */

:root { --fs-h2: clamp(26px, 3.2vw, 32px); }


/* ── Change 2 of 3: the "Conexión humana" squiggle on small viewports ────────
   Source had the page's only bare fixed width: width:520px; right:-120px.
   On a phone that drags the motif across the eyebrow and headline. Below 820px
   it is pulled clear of the text and scaled to the viewport; at >=820px the
   declarations below do not apply, so desktop is untouched. */

.squiggle-motif { top: -50px; right: -120px; width: 520px; }

@media (max-width: 819px) {
  .squiggle-motif {
    top: -36px;
    right: -14vw;
    width: 78vw;
  }
}


/* ── Photography ─────────────────────────────────────────────────────────────
   The four dashed placeholders are now real <img> elements. Each carries its
   aspect-ratio inline (4/5 for the "Quién soy" portrait, 1/1 for the three in
   "En el taller"); object-fit:cover crops to that box so a photo whose native
   ratio differs is never distorted.

   Square corners and no shadow, per the brand: an unstyled <img> already
   satisfies both, so nothing is added here beyond the fit.

   The cream-deep background shows through while a lazy image is still loading,
   which keeps the block from flashing white on the cream page.

   Note: this also retires the box-sizing fix that used to live here. The old
   placeholder was a padded div whose width:100% + padding + border overflowed
   its grid column by 50px under content-box. An <img> has no padding or
   border, so the overflow cannot recur. Kept in git history, not in the CSS.

   height:auto is load-bearing, not decoration. Each <img> carries width/height
   attributes so the browser knows the intrinsic size, but those attributes map
   to CSS presentational hints: the inline width:100% overrides the width hint
   while the height hint survives and beats aspect-ratio. Without height:auto
   the boxes take the attribute heights verbatim and the three "squares" render
   at 0.771 / 1.167 / 0.791 instead of 1.000. */

.photo {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  background: var(--cream-deep);
}


/* ── Button — from design-export/design-system/components/core/Button.jsx ─────
   The JSX rendered a <button> and tracked hover with React state. Here the
   wrapping <a> carries the button styling directly: a <button> inside an <a> is
   invalid HTML and would not navigate without JS, and the wrapper contributed
   nothing to the box beyond display and border-bottom, so collapsing the two is
   pixel-identical. Selectors are written `a.btn…` so they outrank the
   `a:hover` rule in tokens/base.css. */

a.btn {
  /* The UA stylesheet gives <button> box-sizing:border-box and <a> content-box.
     Restoring it here is what keeps the full-width CTA at max-width 340px
     instead of 340 + padding + border = 414px. */
  box-sizing: border-box;
  font: inherit;
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  letter-spacing: 0.04em;
  line-height: 1;
  border-radius: var(--radius-none);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  box-shadow: var(--shadow-none);
  transition: var(--transition-color);
  border-bottom: none;
}

/* sizes.lg */
a.btn--lg { padding: 17px 36px; font-size: var(--fs-body); }

/* tones.primary + hovers.primary */
a.btn--primary {
  background: var(--action);
  color: var(--action-text);
  border: 1px solid var(--action);
}
a.btn--primary:hover {
  background: var(--action-hover);
  border-color: var(--action-hover);
  color: var(--action-text);
}

/* tones.inverse + hovers.inverse */
a.btn--inverse {
  background: var(--cream);
  color: var(--clay);
  border: 1px solid var(--cream);
}
a.btn--inverse:hover {
  background: var(--cream-deep);
  border-color: var(--cream-deep);
  color: var(--clay);
}

/* full={true} */
a.btn--full { display: flex; width: 100%; }