/* =========================================================================
   Miramar Brewing: components
   Buttons, section heads, chips, shape slot. Shared by every section.
   ========================================================================= */

/* =========================================================================
   Buttons
   ========================================================================= */
.btn {
  --bg: var(--inv); --fg: var(--on-inv); --fill: var(--parcha); --fill-fg: var(--ink); --line: transparent;
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; gap: var(--s-2);
  height: var(--s-5); padding: 0 var(--s-0) 0 var(--s-3);
  border-radius: var(--r-pill);
  background: var(--bg); color: var(--fg);
  box-shadow: inset 0 0 0 2px var(--line);
  font: 800 max(12px, var(--t--1))/1 var(--f-text); letter-spacing: .06em; text-transform: uppercase;   /* 12px floor keeps phones legible */
  overflow: hidden;
  transition: color var(--t-btn-color) var(--ease-btn), scale .6s var(--ease-cream);
}
.btn__fill {
  position: absolute; z-index: -1;
  right: var(--s-3); top: 50%;                      /* the arrow disc's center */
  width: 260%; aspect-ratio: 1; border-radius: 50%;
  background: var(--fill);
  translate: 50% -50%; scale: 0;
  transition: scale var(--t-btn-fill) var(--ease-btn);
}
.btn__label { position: relative; display: block; overflow: hidden; height: 1.1em; line-height: 1.1; }
.btn__label > span { display: block; transition: transform var(--t-btn-text) var(--ease-btn); }
.btn__label > span + span { position: absolute; left: 0; top: 100%; }
.btn__icon {
  display: grid; place-items: center; flex: none;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--fg); color: var(--bg);
  transition: background-color var(--t-btn-color) var(--ease-btn), color var(--t-btn-color) var(--ease-btn),
              rotate var(--t-btn-arrow) var(--ease-btn);
  rotate: -45deg;                 /* ↗ at rest on every button; turns to → on hover */
}
.btn__icon svg { width: var(--s-2); height: var(--s-2); }
.btn:is(:hover, .is-hover) { color: var(--fill-fg); }
.btn:is(:hover, .is-hover) .btn__fill { scale: 1; }
.btn:is(:hover, .is-hover) .btn__label > span { transform: translateY(-100%); }
.btn:is(:hover, .is-hover) .btn__icon { rotate: 0deg; background: var(--ink); color: var(--fill); }
.btn:active { scale: .97; }

.btn--cream { --bg: var(--inv); --fg: var(--on-inv); --fill: var(--parcha); }
.btn--parcha { --bg: var(--parcha); --fg: var(--ink); --fill: var(--cream); }
.btn--ghost { --bg: transparent; --fg: var(--on-page); --line: var(--on-page); --fill: var(--cielo); }
.btn--ghost .btn__icon { background: var(--inv); color: var(--on-inv); }
.btn--sm { height: 48px; padding: 0 var(--s-0) 0 var(--s-2); gap: var(--s-1); font-size: 14px; }
.btn--sm .btn__icon { width: 40px; height: 40px; }
.btn--sm .btn__icon svg { width: 17px; height: 17px; }

/* =========================================================================
   Shared section bits
   ========================================================================= */

/* Section head, on the page grid: the title with its shapes beside it on one line, then the lead
   if the section has one (no sub just for the sake of it). Titles don't need to shout: --t-4 on
   wide screens, a step down below. Head to content is --s-6, or --s-5 for a title on its own. */
.section-head {
  display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--s-3);
  align-items: end;
  padding: 0 var(--margin);
  margin-bottom: var(--s-6);
}
.section-head:not(:has(.section-lead)) { margin-bottom: var(--s-5); }
.section-title {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; align-items: center; gap: .08em .24em;
  font: 900 italic var(--t-4)/var(--lh-display) var(--f-display);
  font-stretch: 135%;
  letter-spacing: -.02em;
  text-transform: uppercase;
}
.section-lead { grid-column: 6 / -1; justify-self: end; max-width: 34ch; padding-top: var(--s-3); font-size: var(--t-1); line-height: 1.33; font-weight: 500; }
.section-lead[data-scroll] { opacity: 0; translate: 0 24px; transition: opacity 1.1s var(--ease-out) .15s, translate 1.3s var(--ease-out) .15s; }
.section-lead.is-inview { opacity: 1; translate: 0 0; }

/* Small laptops: one step down so title and shapes still share a line */
@media (min-width: 1024px) and (max-width: 1279px) {
  .section-title { font-size: var(--t-3); }
}
@media (max-width: 1023px) {
  .section-title { font-size: var(--t-3); }
  .section-lead { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 639px) {
  .section-title { font-size: var(--t-2); font-stretch: 100%; }   /* "Las cervezas" keeps its shapes on its line at 390 */
}

/* Custom shape slot: any one-color SVG silhouette in assets/shapes/ renders as a flat palette shape.
   <span class="shape" style="--shape: url(assets/shapes/NAME.svg); --c: var(--rosa); --s: 140px"></span> */
.shape {
  display: block; flex: none;
  width: var(--s, 120px); aspect-ratio: var(--ar, 1);
  background: var(--c, var(--cream));
  -webkit-mask: var(--shape) center / contain no-repeat;
  mask: var(--shape) center / contain no-repeat;
}

.mask { display: inline-block; overflow: hidden; vertical-align: bottom; padding: .02em .1em .06em; margin: -.02em -.1em -.06em; }
.mask > span { display: inline-block; transform: translateY(108%) rotate(3deg); transform-origin: 0 100%; transition: transform 1.3s var(--ease-out); }
.is-inview .mask > span { transform: none; }
.is-inview .mask:nth-of-type(2) > span { transition-delay: .08s; }
.is-inview .mask:nth-of-type(3) > span { transition-delay: .16s; }

.section-title__shapes { display: inline-flex; align-items: center; gap: .08em; }
.st { display: block; width: .62em; height: .62em; background: var(--c); scale: 0; transition: scale 1.1s var(--ease-spring); }
.is-inview .st { scale: 1; }
.st:nth-child(2) { transition-delay: .08s; } .st:nth-child(3) { transition-delay: .16s; } .st:nth-child(4) { transition-delay: .24s; }
/* Each section's own few (2026-10-15, Miguel: be intentional with the shapes, mix his with the plain
   ones): Cervezas two cans, pink and baby blue, either side of the seal (its ABV badge); Historia the
   flag's triangle in the flag's blue, a quarter, and the quatrefoil for its four moments */
.st--quarter { border-radius: 0 .62em 0 0; }
.st--can { width: .263em; clip-path: url(#gs-can); }   /* the can's 100:236 at .62em tall */
.st--seal { clip-path: url(#gs-scallop); }
.st--flag { clip-path: url(#gs-flag); }
.st--quatre { clip-path: url(#gs-quatrefoil); }

.chip {
  display: inline-flex; align-items: center;
  padding: var(--s-1) var(--s-2); border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 2px currentColor;
  font-weight: 700; font-size: var(--t-0); line-height: 1;
}