/* ==========================================================================
   The house of brands · home page
   Four labels in a row on a hairline grid: logo, name, one line, a link.
   The logos are ink on transparent (site-internal/brand_logos.py). Their
   artwork comes in very different shapes, so each is given its own height
   inside the same box to read at one optical size.
     phone      one column, logo beside the words
     ≥ 640px    two by two
     ≥ 1100px   four across
   ========================================================================== */

/* The heading's own hairline is the grid's top edge. */
.house .section-head { margin-bottom: 0; }

.house__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.house__item { border-bottom: 1px solid var(--line); }

.house__link {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  grid-template-areas:
    "logo name"
    "logo line"
    "logo more";
  column-gap: 1.25rem;
  align-items: start;
  height: 100%;
  padding-block: 1.75rem;
  color: var(--ink);
}

.house__logo {
  grid-area: logo;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 6.5rem;
}
.house__logo img {
  width: auto;
  height: var(--logo-h, 100%);
  max-width: var(--logo-w, 100%);
  object-fit: contain;
  transition: transform 0.6s var(--ease-out);
}
.house__logo--couture { --logo-h: 100%; }
.house__logo--sb      { --logo-h: 62%; }
.house__logo--mds     { --logo-h: auto; --logo-w: 100%; }
.house__logo--bb      { --logo-h: 78%; }

.house__name {
  grid-area: name;
  font-size: var(--fs-display-s);
  line-height: 1.2;
}
.house__line {
  grid-area: line;
  margin-top: 0.5rem;
  color: var(--ink-soft);
  font-size: var(--fs-small);
  line-height: 1.6;
  max-width: 32ch;
}
.house__more {
  grid-area: more;
  justify-self: start;
  margin-top: 1rem;
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  border-bottom: 1px solid currentColor;
  padding-bottom: 0.3rem;
}

.house__link:hover .house__logo img,
.house__link:focus-visible .house__logo img { transform: scale(1.04); }
.house__link:hover .arrow,
.house__link:focus-visible .arrow { transform: translateX(5px); }

@media (min-width: 640px) {
  .house__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .house__item:nth-child(odd) { border-right: 1px solid var(--line); }
  .house__link {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "logo" "name" "line" "more";
    grid-template-rows: auto auto 1fr auto;
    justify-items: center;
    text-align: center;
    padding: clamp(2.5rem, 5vw, 4rem) clamp(1.25rem, 3vw, 2.5rem);
  }
  .house__logo { height: clamp(7.5rem, 11vw, 9.5rem); width: 100%; margin-bottom: clamp(1.75rem, 3vw, 2.5rem); }
  /* Each card spans four rows of the outer grid and shares them with its
     neighbours (subgrid), so a name that runs to two lines ("Odette Gomes
     Couture" at four across) moves the lines and links of the whole row
     down with it instead of leaving them out of step. */
  .house__item,
  .house__link { grid-row: span 4; display: grid; grid-template-rows: subgrid; }
  .house__link { row-gap: 0; }
  .house__logo--mds { --logo-w: min(13.5rem, 80%); }
  .house__more { justify-self: center; margin-top: 1.5rem; }
}

@media (min-width: 1100px) {
  .house__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .house__item:nth-child(odd) { border-right: 0; }
  .house__item + .house__item { border-left: 1px solid var(--line); }
}

@media (prefers-reduced-motion: reduce) {
  .house__logo img { transition: none; }
}

/* Couture leads the house: its mark is drawn a size up from the others. */
.house__item--lead .house__logo { height: 8rem; }
@media (min-width: 640px) { .house__item--lead .house__logo { height: clamp(9rem, 13vw, 11.5rem); margin-top: -1rem; margin-bottom: clamp(0.75rem, 2vw, 1.5rem); } }