/* aiforce.army — the front page only.
 *
 * Everything reusable lives in css/aiforce.css; everything shared between routes lives
 * in css/routes.css. This file holds what belongs to the arrangement of the front page
 * alone: the wordmark as the headline, and the section cards under the plate.
 */

/* --- The wordmark as the headline ------------------------------------------------
   The logo carries the name, so the h1 holds the image and its alt text is the
   accessible name. Width is capped against the copy block rather than the plate. */
.aif-hero__title--mark {
  margin-block-end: var(--s-3);
}

.aif-hero__wordmark {
  display: block;
  width: min(100%, 30rem);
  height: auto;
}

@media (max-width: 859px) {
  .aif-hero__wordmark {
    width: min(100%, 20rem);
  }
}

/* --- The sections ---------------------------------------------------------
   One card per section under the plate: its own plate, its name, one line. The whole
   card is the link. Three across at the column's full width, one fewer whenever a card
   would fall under 330px, the rule the ballot and the gallery share. */
.hm-teasers {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-4);
  grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr));
}

.hm-teaser__link {
  display: block;
  padding: 6px 6px var(--s-4);
  color: inherit;
  text-decoration: none;
  background: linear-gradient(150deg, #232949, #12172e);
  border: 1px solid var(--c-line-brass);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5);
  transition: border-color var(--dur-1) var(--ease);
}

.hm-teaser__link:hover,
.hm-teaser__link:focus-visible {
  border-color: var(--c-brass);
}

.hm-teaser__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.hm-teaser__name {
  display: block;
  margin: var(--s-4) var(--s-2) 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-display-4);
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--c-brass);
}

.hm-teaser__link:hover .hm-teaser__name {
  color: var(--c-brass-bright);
}

.hm-teaser__line {
  display: block;
  margin: var(--s-2) var(--s-2) 0;
  font-size: var(--fs-small);
  line-height: 1.5;
  /* Every card's line is two lines tall, whether it fills them or not. */
  min-height: 3em;
  color: var(--c-ink-dim);
}

/* --- The motto -------------------------------------------------------------
   Three words stacked in bone, the initials a step larger in the flag's blue, red and
   white: the same drawing as the share card. The bright blue is not a token because every
   navy in the palette vanishes against the officer's coat. */
.hm-motto {
  /* The wordmark's own drawing carries a side bearing; the stack is inset to meet the
     stem of its F, measured on the render. */
  margin: var(--s-3) 0 0 11px;
  font-size: clamp(1.75rem, 4cqw, 3rem);
  line-height: 1.02;
  letter-spacing: 0.05em;
  color: #e4ddc6;
  text-shadow:
    0 0 14px rgba(4, 7, 20, 1),
    0 0 36px rgba(4, 7, 20, 0.95),
    0 0 80px rgba(4, 7, 20, 0.9);
}

.hm-motto b {
  display: block;
  font-weight: 600;
}

.hm-motto i {
  font-style: normal;
  font-size: 1.16em;
  line-height: 0;
}

.hm-motto__w1 i { color: #5b74c4; }
.hm-motto__w2 i { color: var(--c-red); }
.hm-motto__w3 i { color: #ffffff; }

/* --- The brief ---------------------------------------------------------------
   The plate's two lines, filed as a posted notice under it. */
.hm-brief {
  margin-top: var(--s-7);
  justify-content: center;
  text-align: center;
}

.hm-brief__text {
  margin: 0;
  font-family: var(--font-mono);
  font-size: clamp(1rem, 1.9cqw, 1.375rem);
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.hm-sections {
  padding-block-start: var(--s-6);
}

/* --- The phone plate ---------------------------------------------------------
   Below 860px the plate is the portrait painting, 9:16, shown whole: its own wordmark
   and tagline sit at its foot, so the HTML wordmark and motto are hidden and the plate
   takes the painting's height rather than the poster's minimum. */
@media (max-width: 859px) {
  .aif-hero-banner--plate {
    min-height: 0;
    aspect-ratio: 9 / 16;
  }

  .aif-hero-banner--plate .aif-hero-banner__img {
    object-position: 50% 50%;
  }

  .aif-hero-banner--plate .aif-hero-banner__inner {
    padding-block-start: 0;
    padding-block-end: 0;
  }

  .aif-hero-banner--plate .aif-hero__title--mark,
  .aif-hero-banner--plate .hm-motto {
    display: none;
  }

  .aif-hero-banner--plate .aif-hero-banner__scrim {
    background: none;
  }
}