/* ==========================================================================
   Alma Alentejana: Base e componentes partilhados
   Depende de tokens.css
   ========================================================================== */

/* Reset mínimo ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-height) + var(--space-4));
  interpolate-size: allow-keywords;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  min-height: 100svh;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
:where(h1, h2, h3, h4, p, li, figcaption, blockquote) { overflow-wrap: break-word; }
p, li { text-wrap: pretty; }

/* Foco visível só com teclado */
:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

/* Tipografia --------------------------------------------------------------- */
.t-display, .t-h1, .t-h2, .t-h3, .t-h4, .t-stat {
  color: var(--color-heading);
  font-weight: var(--weight-regular);
  text-wrap: balance;
}
.t-display {
  font-family: var(--font-display);
  font-size: var(--text-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
}
.t-h1 {
  font-family: var(--font-display);
  font-size: var(--text-h1);
  line-height: var(--leading-h1);
  letter-spacing: var(--tracking-h1);
}
.t-h2 {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  line-height: var(--leading-h2);
  letter-spacing: var(--tracking-h2);
}
.t-h3 {
  font-family: var(--font-serif);
  font-size: var(--text-h3);
  line-height: var(--leading-h3);
  letter-spacing: var(--tracking-h3);
}
.t-h4 {
  font-family: var(--font-serif);
  font-size: var(--text-h4);
  line-height: var(--leading-h4);
  letter-spacing: var(--tracking-h4);
}
.t-stat {
  font-family: var(--font-display);
  font-size: var(--text-stat);
  line-height: var(--leading-stat);
  letter-spacing: var(--tracking-stat);
  font-variant-numeric: lining-nums;
}
.t-lead {
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
  letter-spacing: var(--tracking-lead);
  color: var(--color-text);
}
.t-small {
  font-size: var(--text-small);
  line-height: var(--leading-small);
  letter-spacing: var(--tracking-small);
}
.t-caption {
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-caption);
  color: var(--color-text-muted);
}
.t-muted { color: var(--color-text-muted); }
.t-italic { font-family: var(--font-serif); font-style: italic; }

/* Sobretítulo: ecoa o "ALENTEJANA" do logótipo: traço + maiúsculas espaçadas */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-eyebrow);
  line-height: var(--leading-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  color: var(--color-brand-soft);
}
.theme-dark .eyebrow { color: var(--color-highlight); }
.eyebrow::before {
  content: "";
  width: 2rem;
  height: 1px;
  background: currentColor;
  opacity: 0.7;
}
.eyebrow--plain::before { display: none; }

.prose > * + * { margin-top: var(--space-4); }
.prose { max-width: var(--measure); }

/* Layout ------------------------------------------------------------------- */
.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}
.container--narrow { width: min(100% - 2 * var(--gutter), var(--container-narrow)); }
.container--wide   { width: min(100% - 2 * var(--gutter), var(--container-wide)); }

.section { padding-block: var(--space-section); }
.section--alt  { background: var(--color-bg-alt); }
.section--dark { background: var(--color-bg); color: var(--color-text); } /* usar com .theme-dark */

.section-head {
  display: grid;
  gap: var(--space-5) var(--space-9);
  align-items: end;
  margin-bottom: var(--space-block);
}
@media (min-width: 1025px) {
  .section-head--split { grid-template-columns: 1.15fr 1fr; }
}
.section-head__title { display: grid; gap: var(--space-4); }
.section-head__aside { display: grid; gap: var(--space-5); justify-items: start; max-width: 34rem; }
@media (min-width: 1025px) {
  .section-head--split .section-head__aside { justify-self: end; }
}

/* Botões -------------------------------------------------------------------
   Feedback imediato no pointer-down (:active), sem esperar pelo clique. */
.btn {
  --btn-pad-y: 0.875rem;
  --btn-pad-x: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: 3rem;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  border-radius: var(--radius-pill);
  font-size: var(--text-button);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-button);
  line-height: 1.2;
  white-space: nowrap;
  border: 1px solid transparent;
  transition:
    background-color var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard),
    transform var(--dur-base) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.btn:active {
  transform: scale(var(--press-scale));
  transition-duration: var(--dur-press);
}
.btn .icon { transition: transform var(--dur-base) var(--ease-out); }
@media (hover: hover) {
  .btn:hover .icon--arrow { transform: translateX(3px); }
}

.btn--primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
}
@media (hover: hover) {
  .btn--primary:hover { background: var(--btn-primary-bg-hover); }
}
.btn--ghost {
  border-color: var(--btn-ghost-border);
  color: var(--btn-ghost-text);
}
@media (hover: hover) {
  .btn--ghost:hover { background: color-mix(in srgb, var(--btn-ghost-text) 8%, transparent); }
}
/* Sobre fotografia */
.btn--light { background: var(--cal-50); color: var(--terra-800); }
@media (hover: hover) { .btn--light:hover { background: var(--white); } }
.btn--glass {
  background: var(--material-dark-bg);
  -webkit-backdrop-filter: var(--material-dark-blur);
  backdrop-filter: var(--material-dark-blur);
  border-color: var(--material-dark-edge);
  color: var(--cal-50);
}
.btn--sm { --btn-pad-y: 0.625rem; --btn-pad-x: 1.125rem; min-height: 2.5rem; font-size: var(--text-small); }

/* Botão circular (setas) */
.btn-circle {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: 1px solid var(--color-line-strong);
  color: var(--color-heading);
  transition:
    background-color var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard),
    transform var(--dur-base) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.btn-circle:active { transform: scale(0.94); transition-duration: var(--dur-press); }
@media (hover: hover) {
  .btn-circle:hover { background: var(--color-brand); border-color: var(--color-brand); color: var(--color-bg); }
}
.btn-circle:disabled { opacity: 0.35; pointer-events: none; }
.btn-circle--light { border-color: rgb(255 255 255 / 0.55); color: var(--white); }
@media (hover: hover) {
  .btn-circle--light:hover { background: var(--white); border-color: var(--white); color: var(--terra-800); }
}

/* Link com seta */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--weight-medium);
  color: var(--color-brand);
  border-bottom: 1px solid color-mix(in srgb, currentColor 35%, transparent);
  padding-bottom: 2px;
  transition: border-color var(--dur-fast) var(--ease-standard);
}
.link-arrow .icon { transition: transform var(--dur-base) var(--ease-out); }
@media (hover: hover) {
  .link-arrow:hover { border-color: currentColor; }
  .link-arrow:hover .icon { transform: translateX(3px); }
}

/* Ícones ------------------------------------------------------------------- */
.icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon--lg { width: 1.75rem; height: 1.75rem; }

/* Media -------------------------------------------------------------------- */
.media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-placeholder);
}
.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Placeholder de imagem em falta (decisão: espaços cinzentos) */
.placeholder {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--space-2);
  padding: var(--space-5);
  background:
    repeating-linear-gradient(135deg, transparent 0 14px, rgb(0 0 0 / 0.025) 14px 15px),
    var(--color-placeholder);
  color: var(--color-placeholder-text);
  text-align: center;
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-caption);
  border-radius: inherit;
  width: 100%;
  height: 100%;
}
.placeholder .icon { width: 1.75rem; height: 1.75rem; opacity: 0.7; }

/* Conteúdo inventado/provisório: a validar pelo cliente */
.inventado {
  color: var(--color-invented) !important;
  text-decoration: underline dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

/* Utilitários -------------------------------------------------------------- */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -4rem;
  z-index: calc(var(--z-sheet) + 1);
  padding: var(--space-3) var(--space-5);
  background: var(--terra-800);
  color: var(--cal-50);
  border-radius: var(--radius-pill);
}
.skip-link:focus { top: var(--space-4); }

/* Entrada suave de conteúdo ao entrar no ecrã (só opacidade + pequeno desvio) */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  }
  .reveal.is-visible { opacity: 1; transform: none; }
}