/* ARJO — Section Primitives.
   The shared vocabulary every page section is built from: the section band,
   the centred shell, the eyebrow + heading pair, the type scale, cropped
   media, buttons and the scroll-reveal state. Values come from theme.json
   (--wp--preset--* / --wp--custom--*) only. */

/* ---- 1. Bands and shell ------------------------------------------------ */
.arjo-section {
  padding-block: var(--wp--preset--spacing--150);
}
.arjo-section--sunken {
  background-color: var(--wp--preset--color--surface-sunken);
}
/* An inverted band: espresso ground, cream text, photograph behind a scrim. */
.arjo-section--invert {
  position: relative;
  background-color: var(--wp--preset--color--surface-invert);
  color: var(--wp--preset--color--on-invert);
  overflow: hidden;
}
.arjo-section__media {
  position: absolute;
  inset: 0;
}
.arjo-section__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.arjo-section__scrim {
  position: absolute;
  inset: 0;
  background-color: var(--wp--custom--color-scrim-strong);
}

.arjo-shell {
  position: relative;
  width: var(--wp--custom--layout-shell);
  margin-inline: auto;
}
/* Lets a horizontal rail run off the right edge of the shell. */
.arjo-bleed-right {
  margin-right: calc(var(--wp--custom--layout-side) * -1);
}

/* ---- 2. Section head --------------------------------------------------- */
.arjo-section-head {
  display: grid;
  gap: var(--wp--preset--spacing--50);
  padding-bottom: var(--wp--preset--spacing--90);
}
.arjo-section-label {
  display: flex;
  align-items: baseline;
  gap: var(--wp--preset--spacing--40);
  margin: 0;
  font-size: var(--wp--preset--font-size--xxs);
  letter-spacing: var(--wp--custom--tracking-widest);
  text-transform: uppercase;
  color: var(--wp--preset--color--ink-muted);
}
.arjo-section-label::after {
  content: "";
  flex: 1;
  height: var(--wp--custom--border-hairline);
  background-color: var(--wp--preset--color--line);
  transform: translateY(-0.25em);
}
.arjo-section-label__index {
  color: var(--wp--preset--color--accent);
}
.arjo-section--invert .arjo-section-label {
  color: var(--wp--preset--color--on-invert-muted);
}
.arjo-section--invert .arjo-section-label::after {
  background-color: var(--wp--preset--color--line-invert);
}
.arjo-section--invert .arjo-section-label__index {
  color: var(--wp--preset--color--accent-soft);
}

/* ---- 3. Type scale ----------------------------------------------------- */
/* Global Styles colours every h1-h6 with --contrast (an element selector, so a
   single class beats it). Headings must follow the band they sit in instead —
   otherwise the inverted bands render espresso text on an espresso ground. */
.arjo-heading-xl,
.arjo-heading-lg,
.arjo-heading-md {
  margin: 0;
  color: inherit;
  font-family: var(--wp--preset--font-family--display);
  font-weight: var(--wp--custom--weight-semibold);
  letter-spacing: var(--wp--custom--tracking-tight);
  line-height: var(--wp--custom--leading-snug);
  text-wrap: balance;
}
.arjo-heading-xl { font-size: var(--wp--preset--font-size--xxxl); }
.arjo-heading-lg { font-size: var(--wp--preset--font-size--xx-large); }
.arjo-heading-md {
  font-size: var(--wp--preset--font-size--x-large);
  letter-spacing: var(--wp--custom--tracking-snug);
}
.arjo-heading-sm {
  margin: 0;
  color: inherit;
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--large);
  font-weight: var(--wp--custom--weight-medium);
  letter-spacing: var(--wp--custom--tracking-snug);
  line-height: var(--wp--custom--leading-snug);
}
.arjo-body-text {
  margin: 0;
  max-width: var(--wp--custom--layout-measure);
  color: var(--wp--preset--color--ink-secondary);
  text-wrap: pretty;
}
.arjo-section--invert .arjo-body-text {
  color: var(--wp--preset--color--on-invert-muted);
}
.arjo-numeral {
  font-family: var(--wp--preset--font-family--display);
  font-variant-numeric: tabular-nums;
  font-weight: var(--wp--custom--weight-medium);
}

/* ---- 4. Media ---------------------------------------------------------- */
.arjo-media {
  position: relative;
  overflow: hidden;
  background-color: var(--wp--preset--color--surface-sunken);
}
.arjo-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.arjo-media--portrait  { aspect-ratio: var(--wp--custom--ratio-portrait); }
.arjo-media--square    { aspect-ratio: var(--wp--custom--ratio-square); }
.arjo-media--landscape { aspect-ratio: var(--wp--custom--ratio-landscape); }
.arjo-media--wide      { aspect-ratio: var(--wp--custom--ratio-wide); }

/* ---- 5. Buttons -------------------------------------------------------- */
/* The hero scopes its own .arjo-hero .arjo-btn rules, which are more specific
   and continue to win there. These are the buttons everywhere else. */
.arjo-btn {
  --arjo-btn-bg: transparent;
  --arjo-btn-fg: var(--wp--preset--color--contrast);
  --arjo-btn-border: var(--wp--preset--color--contrast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--wp--preset--spacing--30);
  min-height: 3rem;
  padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--60);
  background-color: var(--arjo-btn-bg);
  color: var(--arjo-btn-fg);
  border: var(--wp--custom--border-hairline) solid var(--arjo-btn-border);
  border-radius: 0;
  font-size: var(--wp--preset--font-size--small);
  font-weight: var(--wp--custom--weight-medium);
  letter-spacing: var(--wp--custom--tracking-snug);
  line-height: 1;
  text-align: center;
  text-decoration: none;
  transition:
    background-color var(--wp--custom--duration-base) var(--wp--custom--ease-standard),
    color var(--wp--custom--duration-base) var(--wp--custom--ease-standard),
    border-color var(--wp--custom--duration-base) var(--wp--custom--ease-standard);
}
.arjo-btn__icon {
  flex: none;
  width: 1.125em;
  height: 1.125em;
}
.arjo-btn--primary {
  --arjo-btn-bg: var(--wp--preset--color--contrast);
  --arjo-btn-fg: var(--wp--custom--color-on-image);
  --arjo-btn-border: var(--wp--preset--color--contrast);
}
.arjo-btn--primary:hover,
.arjo-btn--primary:focus-visible {
  --arjo-btn-bg: var(--wp--custom--color-cta-hover);
  --arjo-btn-border: var(--wp--custom--color-cta-hover);
}
.arjo-btn--outline:hover,
.arjo-btn--outline:focus-visible {
  --arjo-btn-bg: var(--wp--preset--color--contrast);
  --arjo-btn-fg: var(--wp--preset--color--base);
}
.arjo-btn--on-image {
  --arjo-btn-fg: var(--wp--custom--color-on-image);
  --arjo-btn-border: var(--wp--custom--color-line-on-image-loud);
}
.arjo-btn--on-image:hover,
.arjo-btn--on-image:focus-visible {
  --arjo-btn-bg: var(--wp--custom--color-on-image);
  --arjo-btn-fg: var(--wp--preset--color--contrast);
  --arjo-btn-border: var(--wp--custom--color-on-image);
}
/* Over a photograph the espresso fill disappears, so primary flips to cream. */
.arjo-section--invert .arjo-btn--primary {
  --arjo-btn-bg: var(--wp--preset--color--on-invert);
  --arjo-btn-fg: var(--wp--preset--color--contrast);
  --arjo-btn-border: var(--wp--preset--color--on-invert);
}
.arjo-section--invert .arjo-btn--primary:hover,
.arjo-section--invert .arjo-btn--primary:focus-visible {
  --arjo-btn-bg: var(--wp--custom--color-on-image);
  --arjo-btn-border: var(--wp--custom--color-on-image);
}
.arjo-btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--30);
}

/* ---- 6. Scroll reveal -------------------------------------------------- */
/* The hidden state is applied only once the script has confirmed it can undo
   it, so content is never stranded invisible if the script fails to load. */
.arjo-reveal-ready [data-arjo-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity var(--wp--custom--duration-reveal) var(--wp--custom--ease-out),
    transform var(--wp--custom--duration-reveal) var(--wp--custom--ease-out);
}
.arjo-reveal-ready [data-arjo-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* ---- 7. Editor --------------------------------------------------------- */
.editor-styles-wrapper [data-arjo-reveal] {
  opacity: 1;
  transform: none;
}