/* =============================================================================
   BRAND GUIDELINES PAGE - web edition of the Abelara Brand Book
   Layout mirrors the book's spreads: narrow text column left, artwork right.
   Font sizes live in typography.css (.brand-*). Artwork is official, never redrawn.
   ============================================================================= */

/* Spreads */
.brand-part .section-container {
  max-width: 1400px;
  margin: 0 auto;
}

.brand-spread {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr);
  gap: var(--font-size-5xl);
  width: 100%;
  padding: var(--font-size-5xl) 0;
  border-top: 1px solid var(--brand-blackboard-20);
  text-align: left;
  scroll-margin-top: var(--header-offset);
}

.section-divider + .brand-spread {
  border-top: none;
}

.brand-spread-text h3 {
  margin-bottom: var(--font-size-md);
}

.brand-spread-text h4 {
  margin: var(--font-size-xl) 0 var(--font-size-xs);
}

.brand-spread-text p,
.brand-spread-text li {
  margin-bottom: var(--font-size-sm);
}

.brand-spread-text ul {
  list-style: disc;
  padding-left: var(--font-size-xl);
  margin-bottom: var(--font-size-sm);
}

.brand-spread-text a,
.brand-versions tfoot a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color 0.3s ease;
}

.brand-spread-text a:hover,
.brand-spread-text a:focus-visible {
  color: var(--brand-red);
}

/* Brand story statements: measure kept to a readable line length */
.brand-display,
.brand-lead,
.brand-statement,
.brand-spread-visual > p:not([class]) {
  max-width: var(--hero-text-max-width-desktop);
}

.brand-lead + .brand-statement,
.brand-statement + .brand-statement {
  margin-top: var(--font-size-md);
}

.brand-spread-visual > p:not([class]) {
  margin-top: var(--font-size-xl);
}

/* Artwork grids keep their natural row height when the text column is taller */
.brand-donts,
.brand-photos,
.brand-illustrations,
.brand-icons,
.brand-palette,
.brand-specimens {
  align-content: start;
}

/* Panels behind artwork */
.brand-panel {
  background: var(--brand-blackboard);
  color: var(--brand-white);
  padding: var(--font-size-5xl);
}

.brand-panel-mist {
  background: var(--brand-mist);
  padding: var(--font-size-5xl);
}

/* Characteristics (book p.9) */
.brand-traits div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--font-size-xl);
  align-items: center;
  padding: var(--font-size-xl) 0;
  border-bottom: 1px solid var(--brand-blackboard-20);
}

.brand-traits div:first-child {
  padding-top: 0;
}

.brand-traits div:last-child {
  border-bottom: none;
}

.brand-traits dd {
  margin: 0;
}

/* Logo artwork sizes; clear-space boxes are calculated from --logo-h */
.brand-logo-hero { --logo-h: calc(var(--font-size-5xl) * 2); }
.brand-logo-primary { --logo-h: var(--font-size-5xl); }
.brand-logo-stacked { --logo-h: calc(var(--font-size-5xl) * 2); }
.brand-logo-mark { --logo-h: var(--font-size-7xl); }
.brand-logo-min { --logo-h: var(--font-size-sm); }

.brand-logo-hero,
.brand-logo-primary,
.brand-logo-stacked,
.brand-logo-mark,
.brand-logo-min {
  display: block;
  height: var(--logo-h);
  width: auto;
  max-width: none;
}

#logo .brand-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--font-size-5xl);
}

.brand-directions {
  display: flex;
  gap: var(--font-size-5xl);
  justify-content: center;
}

.brand-directions figure,
.brand-donts figure,
.brand-icons figure {
  margin: 0;
  text-align: center;
}

.brand-directions img {
  display: block;
  width: var(--font-size-8xl);
  height: auto;
  margin: 0 auto var(--font-size-xs);
}

/* Logo versions: Blackboard columns, black logo on mist (book p.13) */
.brand-scroll {
  overflow-x: auto;
}

.brand-versions {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  background: var(--brand-blackboard);
  color: var(--brand-white);
}

.brand-versions th,
.brand-versions td {
  padding: var(--font-size-xl);
  text-align: center;
  vertical-align: middle;
}

.brand-versions img {
  margin: 0 auto;
}

.brand-versions tbody th,
.brand-versions tfoot th {
  text-align: left;
  border-right: 1px solid var(--brand-white-70);
}

.brand-versions tbody td {
  height: calc(var(--font-size-8xl) * 2);
}

.brand-versions tr > :last-child {
  background: var(--brand-mist);
  color: var(--brand-blackboard);
}

.brand-versions tfoot a:hover,
.brand-versions tfoot a:focus-visible {
  color: var(--brand-green);
}

.brand-versions tfoot td:last-child a:hover,
.brand-versions tfoot td:last-child a:focus-visible {
  color: var(--brand-red);
}

/* Logo treatment: clear space = 1/2 small "a" = 16.7% of primary height; mark = 25% (book p.14) */
.brand-clear-row,
.brand-min-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
  gap: var(--font-size-3xl);
}

.brand-clear {
  display: block;
  padding: calc(var(--logo-h) * var(--clear));
  outline: 1px solid var(--brand-yellow);
}

.brand-clear-primary { --logo-h: calc(var(--font-size-5xl) * 2); --clear: 0.167; }
.brand-clear-mark { --logo-h: var(--font-size-7xl); --clear: 0.25; }

.brand-rule {
  border: none;
  border-top: 1px solid var(--brand-white-70);
  margin: var(--font-size-5xl) 0;
}

.brand-min-row p {
  display: flex;
  align-items: center;
  gap: var(--font-size-sm);
}

.brand-min-row .brand-label {
  padding-right: var(--font-size-sm);
  border-right: 1px solid var(--brand-white);
}

/* Don'ts (book p.15) and photography grid (p.19) */
.brand-donts,
.brand-photos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--font-size-xl);
}

.brand-donts img,
.brand-hero-lines img,
.brand-illustrations img,
.brand-icons img {
  display: block;
  width: 100%;
  height: auto;
}

.brand-donts figcaption {
  margin-top: var(--font-size-xs);
}

/* Color palette mosaic (book p.16) */
.brand-palette {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--font-size-sm);
}

.brand-tile {
  min-height: calc(var(--font-size-8xl) * 1.5);
  padding: var(--font-size-xl);
  color: var(--brand-blackboard);
}

.brand-tile-tall {
  min-height: calc(var(--font-size-8xl) * 3);
}

.brand-hues,
.brand-gradients {
  display: grid;
  grid-auto-rows: 1fr;
  gap: var(--font-size-sm);
}

.brand-gradients {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.brand-gradients .brand-tile {
  min-height: calc(var(--font-size-8xl) * 2.5);
}

.brand-swatch-white { background: var(--brand-white); border: 1px solid var(--brand-blackboard); }
.brand-swatch-blackboard { background: var(--brand-blackboard); color: var(--brand-white); }
.brand-swatch-blue { background: var(--brand-blue); }
.brand-swatch-green { background: var(--brand-green); }
.brand-swatch-yellow { background: var(--brand-yellow); }
.brand-swatch-red { background: var(--brand-red); }
.brand-swatch-blue-green { background: var(--gradient-blue-green); }
.brand-swatch-blue-yellow { background: var(--gradient-blue-yellow); }
.brand-swatch-red-yellow { background: var(--gradient-red-yellow); }
.brand-swatch-green-yellow { background: var(--gradient-green-yellow); }

/* Typefaces + type styles (book pp.17-18) */
.brand-specimens {
  display: grid;
  gap: var(--font-size-3xl);
}

.brand-specimens .brand-label,
.brand-styles .brand-label {
  margin-bottom: var(--font-size-xs);
}

.brand-styles {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: var(--font-size-4xl) var(--font-size-3xl);
  align-items: start;
}

/* Photography: grayscale multiplied against a brand color or gradient (book p.19) */
.brand-photo {
  aspect-ratio: 3 / 2;
  overflow: hidden;
}

.brand-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: multiply;
}

/* Hero line treatment (book pp.22-23) */
.brand-hero-lines {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--font-size-xl);
  margin: var(--font-size-sm) 0 var(--font-size-3xl);
}

.brand-hero-lines:last-child {
  margin-bottom: 0;
}

/* Line illustrations: rows alternate spot / gradient (book p.24) */
.brand-illustrations {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Icon illustrations, Blackboard only (book p.25) */
.brand-icons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--font-size-3xl);
}

.brand-icons img {
  max-width: calc(var(--font-size-8xl) * 2.5);
  margin: 0 auto var(--font-size-sm);
}

@media (max-width: 1023px) {
  .brand-spread {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--font-size-3xl);
  }
}

@media (max-width: 767px) {
  .brand-panel,
  .brand-panel-mist {
    padding: var(--font-size-xl);
  }

  .brand-palette,
  .brand-styles,
  .brand-traits div {
    grid-template-columns: minmax(0, 1fr);
  }

  .brand-traits div {
    gap: var(--font-size-xs);
  }

  .brand-styles {
    gap: var(--font-size-xs);
  }

  .brand-styles .brand-label:not(.brand-style-caption) {
    margin-top: var(--font-size-xl);
  }

  .brand-donts,
  .brand-photos,
  .brand-icons,
  .brand-illustrations {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .brand-logo-hero,
  .brand-clear-primary {
    --logo-h: var(--font-size-5xl);
  }

  .brand-directions {
    gap: var(--font-size-xl);
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand-spread-text a,
  .brand-versions tfoot a {
    transition: none;
  }
}

/* Don't strike-through (book p.15), drawn over the source art */
.brand-dont {
  position: relative;
}

.brand-dont::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  aspect-ratio: 640 / 353;
  background: linear-gradient(to top right, transparent calc(50% - var(--spacing-xs) / 2), var(--brand-red) calc(50% - var(--spacing-xs) / 2), var(--brand-red) calc(50% + var(--spacing-xs) / 2), transparent calc(50% + var(--spacing-xs) / 2));
  pointer-events: none;
}

/* Logo versions on phones: three color columns fit the screen, row label on its own line above */
@media (max-width: 767px) {
  .brand-versions,
  .brand-versions thead,
  .brand-versions tbody,
  .brand-versions tfoot {
    display: block;
    min-width: 0;
  }

  .brand-versions tr {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .brand-versions thead td {
    display: none;
  }

  .brand-versions tbody th,
  .brand-versions tfoot th {
    grid-column: 1 / -1;
    border-right: none;
    padding-bottom: 0;
  }

  .brand-versions th,
  .brand-versions td {
    padding: var(--font-size-sm);
  }

  .brand-versions tbody td {
    height: auto;
    min-height: var(--font-size-8xl);
    display: flex;
    align-items: center;
  }

  .brand-versions tbody img {
    width: 100%;
    height: auto;
    max-height: var(--logo-h);
    object-fit: contain;
  }

}

/* Logo downloads on phones: stacked tap targets (44px, WCAG 2.5.5) instead of a dotted text run */
@media (max-width: 767px) {
  .brand-versions tfoot td {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
  }

  .brand-versions tfoot .brand-sep {
    display: none;
  }

  .brand-versions tfoot a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(var(--font-size-4xl) + var(--spacing-xxs));
    border: 1px solid currentColor;
    border-radius: var(--radius-sm);
    text-decoration: none;
  }
}