/* Desktop fluid layout (>=768px) -- only the clamp()/cqh rules live here;
   everything else (#viewport/#page positioning, flex alignment) is
   Tailwind classes in index.html. See plans/desktop-fluid-layout.md.

   #page is position:absolute + inset:0 + margin:auto (md: classes in
   index.html), not flex/grid-centered: a non-stretched flex/grid item's
   "auto" size skips aspect-ratio + max-width/max-height resolution
   (confirmed: 984x700 instead of 1440x1024 at 1440x1300).

   #header/#footer deliberately have no container-type:size: as flex items
   of #page whose height is driven by #page's cqh, that circularity
   collapsed #header below its clamp() floor (57.6px vs 74px). Their
   children are pre-multiplied against #page instead (e.g. .logo-img
   13.84% * 60.48% = 8.3704%). */
@media (min-width: 768px) {
  #header {
    height: clamp(74px, 13.84cqh, 190px);
  }
  #page .logo-img {
    height: clamp(38px, 8.3704cqh, 115px);
  }
  #twb-domain-cards {
    gap: clamp(14px, 5.7cqh, 46px);
  }
  #page .card {
    aspect-ratio: var(--twb-domain-card-aspect-desktop);
    height: auto;
    container-type: size;
    --tfl-card-inset: clamp(12px, 4.56cqh, 36px);
  }
  #page .card-caption {
    inset: auto var(--tfl-card-inset) var(--tfl-card-inset);
    --tfl-sub: clamp(10px, 2.55cqh, 16px);
    --tfl-arrow: clamp(20px, 6.84cqh, 52px);
  }
  #page .card-label {
    font-size: clamp(17px, 6.08cqh, 46px);
  }
  #page .card-sub {
    font-size: var(--tfl-sub);
  }
  #page .card-arrow {
    height: var(--tfl-arrow);
    width: var(--tfl-arrow);
    margin-bottom: calc((1.3 * var(--tfl-sub) - var(--tfl-arrow)) / 2);
  }
  #footer {
    height: clamp(82px, 15.23cqh, 205px);
    padding-bottom: clamp(26px, 6.25cqh, 95px);
  }
  #page .social-icon-row {
    margin-bottom: clamp(10px, 1.952cqh, 30px);
    gap: clamp(6px, 0.9762cqh, 18px);
  }
  #page .social-icon {
    height: clamp(30px, 4.686cqh, 66px);
    width: clamp(30px, 4.686cqh, 66px);
  }
  #page .copyright {
    font-size: clamp(10px, calc((min(1257px, 100cqw) - 2 * clamp(14px, 5.7cqh, 46px)) / 3 * 1.40853 * 0.0255), 16px);
  }
}

/* Wide exception: once #page itself is wider than the 1440 baseline, drop the
   1257px cap on the cards row (87.29cqw = 1257/1440) and raise the gap/label/
   arrow clamp ceilings so cards keep scaling with the page instead of
   plateauing at their baseline size. Scoped to #page's own width, so every
   page <=1440 wide is untouched. */
@media (min-width: 768px) {
  @container (min-width: 1441px) {
    #twb-domain-cards {
      max-width: none;
      width: 87.29cqw;
      gap: clamp(14px, 4.49cqh, 120px);
    }
    #page .card {
      --tfl-card-inset: clamp(12px, 4.56cqh, 60px);
    }
    #page .card-label {
      font-size: clamp(17px, 6.08cqh, 80px);
    }
    #page .copyright {
      font-size: clamp(10px, calc((87.29cqw - 2 * clamp(14px, 4.49cqh, 120px)) / 3 * 1.40853 * 0.0255), 16px);
    }
    #page .card-caption {
      --tfl-sub: clamp(10px, 2.55cqh, 28px);
      --tfl-arrow: clamp(20px, 6.84cqh, 90px);
    }
  }
}