/* ---------------------------------------------------------------------------
   patterns.css — structural components shared across every mockup.

   These carry STRUCTURE and BEHAVIOUR, not personality. Personality comes from
   the tokens each brand.css sets, which is why four sites built on this file do
   not look alike.

   Zero JavaScript: the mobile nav is a checkbox, accordions are <details>,
   galleries are scroll-snap. Everything renders with scripting disabled, which
   is also what makes screenshot capture deterministic.
   --------------------------------------------------------------------------- */

/* --- Buttons -------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2xs);
  padding: var(--btn-py, 0.85em) var(--btn-px, 1.6em);
  border: 1px solid transparent;
  border-radius: var(--btn-radius, var(--radius-pill));
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--accent); color: var(--accent-ink); }
.btn--primary:hover { background: var(--ink); }

.btn--outline { border-color: currentColor; }
.btn--outline:hover { background: var(--ink); color: var(--bg); }

.btn--ghost { padding-inline: 0; border-radius: 0; }
.btn--ghost:hover { transform: none; text-decoration: underline; }

.btn--lg { font-size: var(--step-1); --btn-py: 0.95em; --btn-px: 1.9em; }
.btn--block { width: 100%; }

/* --- Site header ---------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--header-bg, var(--bg));
  color: var(--header-ink, var(--ink));
  border-block-end: 1px solid var(--header-line, var(--line));
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-m);
  min-height: var(--header-h, 74px);
}

.brandmark {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4em;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: var(--display-weight);
  letter-spacing: var(--brandmark-tracking, var(--display-tracking));
  text-decoration: none;
  white-space: nowrap;
}

.brandmark small {
  font-family: var(--font-body);
  font-size: 0.5em;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.6;
}

.site-nav ul {
  display: flex;
  align-items: center;
  gap: var(--s-m);
  list-style: none;
  padding: 0;
  margin: 0;
}

.site-nav a {
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  padding-block: var(--s-3xs);
  border-block-end: 2px solid transparent;
}

.site-nav a:hover { border-block-end-color: currentColor; }

/* CSS-only mobile disclosure. */
.nav-toggle { position: absolute; opacity: 0; pointer-events: none; }

.nav-toggle__label {
  display: none;
  padding: 0.45em;
  border: 1px solid currentColor;
  border-radius: var(--radius-s);
  cursor: pointer;
  line-height: 0;
}

.nav-toggle__label svg { width: 22px; height: 22px; }

@media (max-width: 860px) {
  .nav-toggle__label { display: inline-block; }

  .site-header__inner { flex-wrap: wrap; }

  .site-nav {
    order: 3;
    flex-basis: 100%;
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--dur) var(--ease);
  }

  .site-nav > ul {
    overflow: hidden;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    min-height: 0;
  }

  .site-nav a {
    display: block;
    padding-block: var(--s-s);
    border-block-end: 1px solid var(--header-line, var(--line));
  }

  .nav-toggle:checked ~ .site-nav { grid-template-rows: 1fr; }

  .site-header__cta { display: none; }
}

/* --- Language switch ------------------------------------------------------ */
/* Each language is its OWN page (index.html / pt.html), not a JS toggle over
   hidden content. That is the correct shape for a small marketing site: both
   languages get a real indexable URL, `hreflang` can point at them, and a
   Portuguese visitor arriving from a Portuguese search lands on Portuguese.
   A JS toggle serves one URL to Google and wins nothing. */

.lang-switch {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  overflow: hidden;
  flex: none;
}

.lang-switch a {
  padding: 0.4em 0.75em;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-mute);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.lang-switch a:hover { color: var(--ink); }

.lang-switch a[aria-current] {
  background: var(--accent);
  color: var(--accent-ink);
}

/* --- Hero ----------------------------------------------------------------- */

.hero {
  position: relative;
  padding-block: var(--hero-py, var(--s-3xl));
  overflow: hidden;
}

.hero__inner { position: relative; z-index: 2; }

.hero h1 { font-size: var(--hero-size, var(--step-6)); }

/* --- Cards ---------------------------------------------------------------- */

.card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--card-line, var(--line));
  border-radius: var(--card-radius, var(--radius-l));
  overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.card--lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }

.card__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-2xs);
  flex: 1;
  padding: var(--card-pad, var(--s-m));
}

.card__body > .btn:last-child { margin-block-start: auto; align-self: flex-start; }

.card__title { font-size: var(--step-2); }

/* --- Photo slots ---------------------------------------------------------- */
/* Every .media block is a photograph slot in a production build. In these
   mockups it holds purpose-drawn SVG art so the layout reads as art-directed
   rather than as a wireframe. Swapping in a real photo is a one-line change. */

.media {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--accent-soft);
  aspect-ratio: var(--media-ratio, 4 / 3);
}

.media > img,
.media > svg { width: 100%; height: 100%; object-fit: cover; }

.media--square   { --media-ratio: 1 / 1; }
.media--portrait { --media-ratio: 3 / 4; }
.media--wide     { --media-ratio: 16 / 9; }
.media--pano     { --media-ratio: 21 / 9; }

/* --- Badges --------------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3xs);
  padding: 0.4em 0.85em;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  line-height: 1;
}

/* --- Forms ---------------------------------------------------------------- */

.form { display: grid; gap: var(--s-s); }

.form__row {
  display: grid;
  gap: var(--s-s);
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
}

.field { display: grid; gap: var(--s-3xs); }

.field > label { font-size: var(--step--1); font-weight: 600; }

.field > input,
.field > select,
.field > textarea {
  width: 100%;
  padding: 0.8em 1em;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--input-radius, var(--radius));
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.field > textarea { min-height: 7.5em; resize: vertical; }

.field > input:focus,
.field > select:focus,
.field > textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent);
}

.field__hint { font-size: var(--step--1); color: var(--ink-mute); }

/* --- Definition rows (hours, rates, specs) -------------------------------- */

.rows { display: grid; list-style: none; padding: 0; margin: 0; }

.rows > li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-s);
  padding-block: var(--s-xs);
  border-block-end: 1px solid var(--line);
}

.rows > li:last-child { border-block-end: 0; }

.rows__key { font-weight: 600; }
.rows__val { color: var(--ink-soft); text-align: end; }

/* --- Accordion (native disclosure) ---------------------------------------- */

.accordion { border-block-start: 1px solid var(--line); }

.accordion details { border-block-end: 1px solid var(--line); }

.accordion summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-s);
  padding-block: var(--s-s);
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: var(--display-weight);
  cursor: pointer;
  list-style: none;
}

.accordion summary::-webkit-details-marker { display: none; }

.accordion summary::after {
  content: "+";
  flex: none;
  font-family: var(--font-body);
  font-size: var(--step-2);
  font-weight: 300;
  line-height: 1;
  color: var(--ink-mute);
  transition: transform var(--dur) var(--ease);
}

.accordion details[open] summary::after { transform: rotate(45deg); }

.accordion details > *:not(summary) {
  padding-block-end: var(--s-m);
  max-width: var(--measure);
  color: var(--ink-soft);
}

/* --- Horizontal scroll gallery -------------------------------------------- */

.scroller {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--scroller-item, clamp(240px, 60vw, 400px));
  gap: var(--s-s);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-block-end: var(--s-2xs);
  scrollbar-width: thin;
}

.scroller > * { scroll-snap-align: start; }

/* --- Footer --------------------------------------------------------------- */

.site-footer {
  background: var(--footer-bg, var(--ink));
  color: var(--footer-ink, var(--bg));
  padding-block: var(--s-2xl) var(--s-l);
}

.site-footer a { color: inherit; text-decoration: none; opacity: 0.82; }
.site-footer a:hover { opacity: 1; text-decoration: underline; }

.site-footer__grid {
  display: grid;
  gap: var(--s-l);
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
}

.site-footer h3 {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-block-end: var(--s-xs);
}

.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-2xs); }

.site-footer__base {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-s);
  justify-content: space-between;
  align-items: center;
  margin-block-start: var(--s-xl);
  padding-block-start: var(--s-m);
  border-block-start: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  font-size: var(--step--1);
  opacity: 0.72;
}

/* --- Sticky mobile action bar --------------------------------------------- */
/* A trades buyer on a phone wants one thing, and it is the call button. */

.action-bar { display: none; }

@media (max-width: 720px) {
  .action-bar {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 50;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 1px;
    background: var(--line);
    box-shadow: 0 -4px 20px rgb(0 0 0 / 0.12);
  }

  .action-bar a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    padding: var(--s-s);
    background: var(--accent);
    color: var(--accent-ink);
    font-weight: 700;
    text-decoration: none;
  }

  .action-bar a.is-secondary { background: var(--ink); color: var(--bg); }

  body { padding-block-end: 62px; }
}