/*
 * Intrinsic layout primitives for Rivas.
 *
 * This file is deliberately free of viewport breakpoints.  The legacy page
 * markup still contains the approved desktop utility classes, but responsive
 * tracks below are based on the size of the available track space instead of
 * a device width.  The 1440/1600 caps and all desktop image dimensions stay
 * owned by the page components and hero-overlays.css.
 */

/* Award marks retain their muted resting appearance, then reveal the original artwork. */
.rivas-site img[src^="/rivas/images/award-"] {
  transition: filter 200ms ease, opacity 200ms ease;
}

.rivas-site img[src^="/rivas/images/award-"]:hover {
  filter: none !important;
  opacity: 1 !important;
}

@media (prefers-reduced-motion: reduce) {
  .rivas-site img[src^="/rivas/images/award-"] {
    transition: none;
  }
}

:root {
  /*
   * DarkHomepageHeader updates this value with ResizeObserver.  Keeping a
   * zero fallback is important for the first server render: the existing
   * hero padding remains the baseline until the header has measured itself.
   */
  --rivas-header-height: 0px;
  --rivas-header-clearance: clamp(0.75rem, 1.5vw, 1.5rem);
}

.rivas-site .rivas-home-hero-content {
  padding-top: calc(var(--rivas-header-height) + var(--rivas-header-clearance));
}

.rivas-site .rivas-header-spacer {
  min-height: max(115px, calc(var(--rivas-header-height) + var(--rivas-header-clearance)));
}

/*
 * A grid cannot shrink a long URL, label, or form control unless both the
 * grid item and its content have an explicit min-width of zero.
 */
.rivas-site :where(
  [class~="grid"],
  [class~="flex"],
  [class~="inline-flex"]
) {
  min-width: 0;
}

.rivas-site :where(
  [class~="grid"],
  [class~="flex"],
  [class~="inline-flex"]
) > * {
  min-width: 0;
}

.rivas-site :where(img, video, canvas, svg) {
  max-width: 100%;
}

.rivas-site :where(input, textarea, select) {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
}

/*
 * Existing route components use Tailwind's responsive grid tokens.  Keep
 * those tokens as the authoring API, but make their tracks intrinsic at
 * every size.  The minimums are chosen so a 1440/1600-capped container
 * cannot accidentally gain an extra desktop column.
 */
.rivas-site :where(
  [class~="sm:grid-cols-2"],
  [class~="md:grid-cols-2"],
  [class~="lg:grid-cols-2"],
  [class~="xl:grid-cols-2"]
) {
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(100%, max(15rem, calc((100% - 6rem) / 2))), 1fr)
  ) !important;
}

.rivas-site :where(
  [class~="sm:grid-cols-3"],
  [class~="md:grid-cols-3"],
  [class~="lg:grid-cols-3"],
  [class~="xl:grid-cols-3"]
) {
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(100%, max(20rem, calc((100% - 12rem) / 3))), 1fr)
  ) !important;
}

.rivas-site :where(
  [class~="sm:grid-cols-4"],
  [class~="md:grid-cols-4"],
  [class~="lg:grid-cols-4"],
  [class~="xl:grid-cols-4"]
) {
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(100%, max(16rem, calc((100% - 12rem) / 4))), 1fr)
  ) !important;
}

.rivas-site :where(
  [class~="sm:grid-cols-5"],
  [class~="md:grid-cols-5"],
  [class~="lg:grid-cols-5"],
  [class~="xl:grid-cols-5"]
) {
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(100%, max(12rem, calc((100% - 12rem) / 5))), 1fr)
  ) !important;
}

.rivas-site :where(
  [class~="sm:grid-cols-6"],
  [class~="md:grid-cols-6"],
  [class~="lg:grid-cols-6"],
  [class~="xl:grid-cols-6"]
) {
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(100%, max(10rem, calc((100% - 12rem) / 6))), 1fr)
  ) !important;
}

/* Keep responsive col-span utilities from creating a wide implicit track
   when auto-fit has collapsed a calculator/content grid to one track. */
.rivas-site :where(
  [class*="sm:grid-cols-"],
  [class*="md:grid-cols-"],
  [class*="lg:grid-cols-"],
  [class*="xl:grid-cols-"]
) {
  grid-auto-columns: minmax(0, 1fr);
}

/*
 * Small choice groups are intentionally narrower than content columns.  A
 * role-based selector prevents a six-choice calculator control from taking
 * the same 13.5rem floor as a six-column content directory.
 */
.rivas-site [role="radiogroup"][class~="sm:grid-cols-3"] {
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(100%, 9rem), 1fr)
  ) !important;
}

.rivas-site [role="radiogroup"][class~="sm:grid-cols-6"] {
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(100%, 6rem), 1fr)
  ) !important;
}

/*
 * Preserve asymmetric desktop recipes found in existing route markup.  The
 * selectors are intentionally explicit instead of applying a generic
 * minimum to every arbitrary Tailwind grid value.
 */
.rivas-site :where(
  [class*="md:grid-cols-[5fr_7fr]"],
  [class*="lg:grid-cols-[5fr_7fr]"]
) {
  display: flex !important;
  flex-wrap: wrap;
}

.rivas-site :where(
  [class*="md:grid-cols-[5fr_7fr]"],
  [class*="lg:grid-cols-[5fr_7fr]"]
) > :first-child {
  flex: 5 1 26rem;
  min-width: min(100%, 24rem);
}

.rivas-site :where(
  [class*="md:grid-cols-[5fr_7fr]"],
  [class*="lg:grid-cols-[5fr_7fr]"]
) > :last-child {
  flex: 7 1 36.4rem;
  min-width: min(100%, 28rem);
}

.rivas-site :where(
  [class*="md:grid-cols-[7fr_5fr]"],
  [class*="lg:grid-cols-[7fr_5fr]"]
) {
  display: flex !important;
  flex-wrap: wrap;
}

.rivas-site :where(
  [class*="md:grid-cols-[7fr_5fr]"],
  [class*="lg:grid-cols-[7fr_5fr]"]
) > :first-child {
  flex: 7 1 36.4rem;
  min-width: min(100%, 28rem);
}

.rivas-site :where(
  [class*="md:grid-cols-[7fr_5fr]"],
  [class*="lg:grid-cols-[7fr_5fr]"]
) > :last-child {
  flex: 5 1 26rem;
  min-width: min(100%, 24rem);
}

.rivas-site :where(
  [class*="md:grid-cols-[.9fr_1.1fr]"],
  [class*="lg:grid-cols-[.9fr_1.1fr]"]
) {
  display: flex !important;
  flex-wrap: wrap;
}

.rivas-site :where(
  [class*="md:grid-cols-[.9fr_1.1fr]"],
  [class*="lg:grid-cols-[.9fr_1.1fr]"]
) > :first-child {
  flex: 9 1 27rem;
  min-width: min(100%, 24rem);
}

.rivas-site :where(
  [class*="md:grid-cols-[.9fr_1.1fr]"],
  [class*="lg:grid-cols-[.9fr_1.1fr]"]
) > :last-child {
  flex: 11 1 33rem;
  min-width: min(100%, 27rem);
}

.rivas-site :where(
  [class*="md:grid-cols-[.92fr_1.08fr]"],
  [class*="lg:grid-cols-[.92fr_1.08fr]"]
) {
  display: flex !important;
  flex-wrap: wrap;
}

.rivas-site :where(
  [class*="md:grid-cols-[.92fr_1.08fr]"],
  [class*="lg:grid-cols-[.92fr_1.08fr]"]
) > :first-child {
  flex: 92 1 27.6rem;
  min-width: min(100%, 24rem);
}

.rivas-site :where(
  [class*="md:grid-cols-[.92fr_1.08fr]"],
  [class*="lg:grid-cols-[.92fr_1.08fr]"]
) > :last-child {
  flex: 108 1 32.4rem;
  min-width: min(100%, 27rem);
}

.rivas-site :where(
  [class*="md:grid-cols-[.82fr_1.18fr]"],
  [class*="lg:grid-cols-[.82fr_1.18fr]"]
) {
  display: flex !important;
  flex-wrap: wrap;
}

.rivas-site :where(
  [class*="md:grid-cols-[.82fr_1.18fr]"],
  [class*="lg:grid-cols-[.82fr_1.18fr]"]
) > :first-child {
  flex: 82 1 20.5rem;
  min-width: min(100%, 22rem);
}

.rivas-site :where(
  [class*="md:grid-cols-[.82fr_1.18fr]"],
  [class*="lg:grid-cols-[.82fr_1.18fr]"]
) > :last-child {
  flex: 118 1 29.5rem;
  min-width: min(100%, 29rem);
}

.rivas-site :where(
  [class*="md:grid-cols-[.72fr_1.28fr]"],
  [class*="lg:grid-cols-[.72fr_1.28fr]"]
) {
  display: flex !important;
  flex-wrap: wrap;
}

.rivas-site :where(
  [class*="md:grid-cols-[.72fr_1.28fr]"],
  [class*="lg:grid-cols-[.72fr_1.28fr]"]
) > :first-child {
  flex: 72 1 18rem;
  min-width: min(100%, 20rem);
}

.rivas-site :where(
  [class*="md:grid-cols-[.72fr_1.28fr]"],
  [class*="lg:grid-cols-[.72fr_1.28fr]"]
) > :last-child {
  flex: 128 1 32rem;
  min-width: min(100%, 31rem);
}

.rivas-site :where(
  [class*="md:grid-cols-[1.02fr_1fr]"],
  [class*="lg:grid-cols-[1.02fr_1fr]"]
) {
  display: flex !important;
  flex-wrap: wrap;
}

.rivas-site :where(
  [class*="md:grid-cols-[1.02fr_1fr]"],
  [class*="lg:grid-cols-[1.02fr_1fr]"]
) > :first-child {
  flex: 102 1 30.6rem;
  min-width: min(100%, 26rem);
}

.rivas-site :where(
  [class*="md:grid-cols-[1.02fr_1fr]"],
  [class*="lg:grid-cols-[1.02fr_1fr]"]
) > :last-child {
  flex: 100 1 30rem;
  min-width: min(100%, 26rem);
}

.rivas-site :where(
  [class*="md:grid-cols-[1.1fr_.9fr]"],
  [class*="lg:grid-cols-[1.1fr_.9fr]"]
) {
  display: flex !important;
  flex-wrap: wrap;
}

.rivas-site :where(
  [class*="md:grid-cols-[1.1fr_.9fr]"],
  [class*="lg:grid-cols-[1.1fr_.9fr]"]
) > :first-child {
  flex: 11 1 33rem;
  min-width: min(100%, 29rem);
}

.rivas-site :where(
  [class*="md:grid-cols-[1.1fr_.9fr]"],
  [class*="lg:grid-cols-[1.1fr_.9fr]"]
) > :last-child {
  flex: 9 1 27rem;
  min-width: min(100%, 24rem);
}

.rivas-site :where(
  [class*="md:grid-cols-[.85fr_1.15fr]"],
  [class*="lg:grid-cols-[.85fr_1.15fr]"]
) {
  display: flex !important;
  flex-wrap: wrap;
}

.rivas-site :where(
  [class*="md:grid-cols-[.85fr_1.15fr]"],
  [class*="lg:grid-cols-[.85fr_1.15fr]"]
) > :first-child {
  flex: 85 1 25.5rem;
  min-width: min(100%, 23rem);
}

.rivas-site :where(
  [class*="md:grid-cols-[.85fr_1.15fr]"],
  [class*="lg:grid-cols-[.85fr_1.15fr]"]
) > :last-child {
  flex: 115 1 34.5rem;
  min-width: min(100%, 28rem);
}

.rivas-site :where(
  [class*="md:grid-cols-[1fr_.95fr]"],
  [class*="lg:grid-cols-[1fr_.95fr]"]
) {
  display: flex !important;
  flex-wrap: wrap;
}

.rivas-site :where(
  [class*="md:grid-cols-[1fr_.95fr]"],
  [class*="lg:grid-cols-[1fr_.95fr]"]
) > :first-child {
  flex: 100 1 20rem;
  min-width: min(100%, 26rem);
}

.rivas-site :where(
  [class*="md:grid-cols-[1fr_.95fr]"],
  [class*="lg:grid-cols-[1fr_.95fr]"]
) > :last-child {
  flex: 95 1 19rem;
  min-width: min(100%, 25rem);
}

.rivas-site [class*="lg:grid-cols-[minmax(0,1.08fr)_minmax(300px,.72fr)]"] {
  display: flex !important;
  flex-wrap: wrap;
}

.rivas-site [class*="lg:grid-cols-[minmax(0,1.08fr)_minmax(300px,.72fr)]"] > :first-child {
  flex: 108 1 36rem;
  min-width: min(100%, 27rem);
}

.rivas-site [class*="lg:grid-cols-[minmax(0,1.08fr)_minmax(300px,.72fr)]"] > :last-child {
  flex: 72 1 24rem;
  min-width: min(100%, 300px);
}

.rivas-site [class*="lg:grid-cols-[minmax(0,0.82fr)_minmax(0,1fr)]"] {
  display: flex !important;
  flex-wrap: wrap;
}

.rivas-site [class*="lg:grid-cols-[minmax(0,0.82fr)_minmax(0,1fr)]"] > :first-child {
  flex: 82 1 24.6rem;
  min-width: min(100%, 22rem);
}

.rivas-site [class*="lg:grid-cols-[minmax(0,0.82fr)_minmax(0,1fr)]"] > :last-child {
  flex: 100 1 30rem;
  min-width: min(100%, 26rem);
}

.rivas-site :where(
  [class*="md:grid-cols-[3fr_4fr_6fr]"]
) {
  display: flex !important;
  flex-wrap: wrap;
}

.rivas-site [class*="md:grid-cols-[3fr_4fr_6fr]"] > :nth-child(1) {
  flex: 3 1 18rem;
  min-width: min(100%, 18rem);
}

.rivas-site [class*="md:grid-cols-[3fr_4fr_6fr]"] > :nth-child(2) {
  flex: 4 1 24rem;
  min-width: min(100%, 22rem);
}

.rivas-site [class*="md:grid-cols-[3fr_4fr_6fr]"] > :nth-child(3) {
  flex: 6 1 36rem;
  min-width: min(100%, 30rem);
}

/*
 * The article/sidebar split is the one asymmetric recipe with an approved
 * fixed sidebar width.  Keep that width at the cap and let the two blocks
 * wrap when their containing block cannot hold both.
 */
.rivas-site [class*="lg:grid-cols-[minmax(0,888px)_342px]"] {
  display: flex !important;
  flex-wrap: wrap;
}

.rivas-site [class*="lg:grid-cols-[minmax(0,888px)_342px]"] > :first-child {
  flex: 0 1 888px;
  min-width: min(100%, 34rem);
}

.rivas-site [class*="lg:grid-cols-[minmax(0,888px)_342px]"] > :last-child {
  flex: 0 0 342px;
  max-width: 100%;
  min-width: min(100%, 18rem);
}

/*
 * Cards used by horizontal treatment rails keep their desktop crop, but
 * their width is intrinsic to the available viewport rather than a fixed
 * 300px minimum.  The compact modifier is used by the location rail.
 */
.rivas-site :where([data-directory-card], .rivas-fluid-card) {
  box-sizing: border-box;
  width: clamp(16rem, 78vw, 20.625rem);
  max-width: 100%;
  flex-basis: clamp(16rem, 78vw, 20.625rem);
}

.rivas-site .rivas-fluid-card--compact {
  width: clamp(15rem, 76vw, 20rem);
  flex-basis: clamp(15rem, 76vw, 20rem);
}

.rivas-site .rivas-fluid-card--small {
  width: clamp(15rem, 74vw, 18.75rem);
  flex-basis: clamp(15rem, 74vw, 18.75rem);
}

.rivas-site .rivas-fluid-card--wide {
  width: clamp(17rem, 80vw, 21.25rem);
  flex-basis: clamp(17rem, 80vw, 21.25rem);
}

/*
 * CTA labels and form controls should never create a minimum wider than
 * their parent.  CTA groups remain content-sized on wide screens and wrap
 * naturally; a lone CTA therefore consumes only its content width instead
 * of stretching every desktop card.
 */
.rivas-site :where(.cta, button, input, textarea, select) {
  min-width: 0;
  max-width: 100%;
}

.rivas-site :where(.cta, .cta__label) {
  white-space: nowrap;
  overflow-wrap: normal;
}

.rivas-site a[href^="tel:"] {
  white-space: nowrap;
}

.rivas-fluid-cta-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  min-width: 0;
  gap: clamp(0.75rem, 2vw, 1rem);
}

.rivas-fluid-cta-group > .cta {
  flex: 0 1 auto;
  max-width: 100%;
}

.rivas-site [class~="flex-wrap"] > .cta {
  flex: 0 1 auto;
  max-width: 100%;
}

.rivas-site [class~="flex"]:has(> .cta) {
  flex-wrap: wrap;
  min-width: 0;
}

/* Mobile CTA stacking is owned by mobile-standards.css. Avoid inline-size
   containment here: auto-width footer/action groups need their content width. */

/*
 * Hero top padding retains each route's current desktop baseline and only
 * grows when the measured, naturally-wrapped shared header needs more room.
 * No ancestor is transformed, so fixed header positioning remains stable.
 */
.rivas-site :is(section, article):has(h1) :is(
  [class~="pt-32"],
  [class~="sm:pt-32"],
  [class~="md:pt-32"],
  [class~="lg:pt-32"]
) {
  padding-top: max(
    8rem,
    calc(var(--rivas-header-height, 0px) + var(--rivas-header-clearance))
  ) !important;
}

.rivas-site :is(section, article):has(h1) :is(
  [class~="pt-36"],
  [class~="sm:pt-36"],
  [class~="md:pt-36"],
  [class~="lg:pt-36"]
) {
  padding-top: max(
    9rem,
    calc(var(--rivas-header-height, 0px) + var(--rivas-header-clearance))
  ) !important;
}

.rivas-site :is(section, article):has(h1) :is(
  [class~="pt-40"],
  [class~="sm:pt-40"],
  [class~="md:pt-40"],
  [class~="lg:pt-40"]
) {
  padding-top: max(
    10rem,
    calc(var(--rivas-header-height, 0px) + var(--rivas-header-clearance))
  ) !important;
}

.rivas-site :is(section, article):has(h1) :is(
  [class~="pt-44"],
  [class~="sm:pt-44"],
  [class~="md:pt-44"],
  [class~="lg:pt-44"]
) {
  padding-top: max(
    11rem,
    calc(var(--rivas-header-height, 0px) + var(--rivas-header-clearance))
  ) !important;
}

.rivas-site :is(section, article):has(h1) :is(
  [class~="pt-52"],
  [class~="sm:pt-52"],
  [class~="md:pt-52"],
  [class~="lg:pt-52"]
) {
  padding-top: max(
    13rem,
    calc(var(--rivas-header-height, 0px) + var(--rivas-header-clearance))
  ) !important;
}

.rivas-site :is(section, article):has(h1) :is(
  [class~="pt-56"],
  [class~="sm:pt-56"],
  [class~="md:pt-56"],
  [class~="lg:pt-56"]
) {
  padding-top: max(
    14rem,
    calc(var(--rivas-header-height, 0px) + var(--rivas-header-clearance))
  ) !important;
}