/* ==========================================================================
   Pavilion — Companies module (Homepage, Homeowners)
   Markup: <section class="companies" data-companies [data-default="states"]> · JS: js/home.js
   ========================================================================== */

/* ---------- Companies module ---------- */
.companies {
  background: var(--color-off-white);   /* Figma Oct 2026: Off-White on homepage + Homeowners */
  padding: 80px var(--gutter);
  display: flex; flex-direction: column; align-items: center; gap: 40px;
}
.companies__head { text-align: center; max-width: 651px; display: grid; gap: 40px; }
@media (min-width: 768px) { [data-page="home"] .companies { gap: 48px; } }   /* homepage Figma: 80 all round, 48 between header / tabs / grid */
.companies__intro { color: var(--color-gray-400); max-width: 620px; margin: 0 auto; }
/* Filter tabs — segmented track (Figma "Filter tab"): Gray-200 track, white active tab with a soft shadow */
.companies__tabs {
  display: flex; gap: 2px; padding: 4px; max-width: 100%;
  background: var(--color-gray-200); border-radius: var(--radius-pill);
  overflow-x: auto; scrollbar-width: none;
}
.companies__tabs::-webkit-scrollbar { display: none; }
.companies__tabs .chip {
  flex: none; min-height: 0; padding: 13px 22px; background: transparent; color: var(--color-gray-400);
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.companies__tabs .chip:hover { color: var(--color-maroon); }
.companies__tabs .chip.is-active { background: var(--color-white); color: var(--color-maroon); box-shadow: 0 1px 4px rgba(0, 0, 0, .08); }
.companies__tabs .chip:focus-visible { outline: 2px solid var(--color-maroon); outline-offset: -2px; }
/* Sliding highlight (js/home.js): the white pill glides between tabs; tabs sit on top of it */
.companies__tabs.has-pill { position: relative; }
.companies__tabs.has-pill .chip { position: relative; z-index: 1; }
.companies__tabs.has-pill .chip.is-active { background: transparent; box-shadow: none; }
.companies__tabs-pill {
  position: absolute; top: 4px; bottom: 4px; left: 0; width: 0;
  background: var(--color-white); border-radius: var(--radius-pill); box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
  transition: transform .38s cubic-bezier(.3, .7, .2, 1), width .38s cubic-bezier(.3, .7, .2, 1);
  pointer-events: none;
}
.companies__tabs-pill.no-anim { transition: none; }
@media (prefers-reduced-motion: reduce) { .companies__tabs-pill { transition: none; } }

.companies__grid {
  width: 100%; max-width: var(--content-max);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px 20px;   /* 3 across (Figma Oct 2026) */
}
.companies__grid.is-centered { display: flex; flex-wrap: wrap; justify-content: center; }
.companies__grid { align-content: start; align-items: start; }   /* rows keep their size when JS sets a min-height */
.companies__grid.is-centered .tile { width: calc((100% - 40px) / 3); }
.companies__swipe-hint { display: none; }

.tile { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.tile__media {
  position: relative; aspect-ratio: 305 / 200; border-radius: var(--radius-tile);
  overflow: hidden; background: var(--color-gray-200);
}
.tile__media img { width: 100%; height: 100%; object-fit: cover; }
.tile__overlay {
  position: absolute; inset: 0; padding: 20px 22px;
  background: rgba(56, 3, 3, 0.9); color: var(--color-white);
  display: flex; flex-direction: column; justify-content: space-between;
  opacity: 0; transition: opacity .25s ease;
}
.tile:hover .tile__overlay, .tile:focus-visible .tile__overlay { opacity: 1; }
.tile__serving-label {
  font-family: var(--font-mono); font-size: 12px; line-height: 1.4; letter-spacing: var(--ls-label);
  text-transform: uppercase; opacity: .7; margin-bottom: 8px;
}
.tile__serving { font-size: 14px; line-height: 1.5; }
@media (max-width: 1439px) {   /* smaller screens: no "Serving" list on hover, just a centred "Explore stays →" */
  .tile__serving-wrap { display: none; }
  .tile__overlay { justify-content: center; align-items: center; }
}
.tile__visit { font-size: 14px; }
/* Small tiles (tablet widths): tighter overlay so more of the town list fits.
   js/home.js trims whatever still does not fit and ends it with "+ more". */
.tile__media { container-type: inline-size; }
@container (max-width: 260px) {
  .tile__overlay { padding: 14px 16px; }
  .tile__serving-label { font-size: 11px; margin-bottom: 4px; }
  .tile__serving, .tile__visit { font-size: 13px; line-height: 1.4; }
}
.tile__text { display: grid; gap: 12px; }
.tile__name { text-box: trim-both cap alphabetic; }
.tile__loc { text-box: trim-start cap alphabetic; }   /* keep descenders: this line clips for the ellipsis */
.tile__name {
  font-family: var(--font-serif); font-size: var(--fs-h5); line-height: var(--lh-h5);   /* bigger names: Desktop/H5 */
  letter-spacing: var(--ls-body); color: var(--color-black);
}
.tile__loc {
  font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--color-gray-400);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Category tabs (Beach & Coast, Mountains & Lakes, Attractions): location on top as the heading, company name small */
/* Category tabs (Figma): company small on top, destination big below */
.companies__grid.is-by-location .tile__loc {
  font-family: var(--font-serif); font-size: var(--fs-h5); line-height: var(--lh-h5);
  letter-spacing: var(--ls-body); color: var(--color-black); white-space: normal; overflow: visible;
  text-box: trim-both cap alphabetic;
}
.companies__grid.is-by-location .tile__name {
  font-family: var(--font-sans); font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--color-gray-400);
  text-box: trim-both cap alphabetic;
}

/* Map (States tab) */
.companies__map { position: relative; width: 100%; max-width: var(--content-max); }
.map-frame { position: relative; width: 100%; max-width: 1107px; margin: 0 auto; aspect-ratio: 1280 / 660; }
.map-frame__base, .map-frame svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.companies__map-svg [data-state] { cursor: pointer; transition: fill .15s ease; stroke: var(--color-white); stroke-width: 1.2; stroke-opacity: 0; outline: none; }
.companies__map-svg [data-state].is-hover { stroke-opacity: 1; }
.companies__map-svg [data-state].is-hover { fill: var(--color-map-hover); }
.companies__map-svg [data-state].is-selected { fill: var(--color-maroon); }
.companies__map-hint { text-align: center; color: var(--color-gray-400); margin-top: 24px; }
.map-tooltip {
  position: absolute; pointer-events: none; transform: translate(-50%, calc(-100% - 12px));
  background: var(--color-white); border-radius: 12px; padding: 12px 16px;
  box-shadow: 0 8px 24px rgba(56,3,3,.12); white-space: nowrap;
}
.map-tooltip strong { display: block; font-family: var(--font-serif); font-weight: 400; font-size: 20px; color: var(--color-maroon); }
.map-tooltip span { font-size: 14px; color: var(--color-gray-400); }
.companies__state-head { text-align: center; display: grid; gap: 8px; }
/* Swap animation (js/home.js → swap): out to the right, in from the left */
.companies__grid, .companies__state-head {
  transition: transform .34s cubic-bezier(.2, .7, .2, 1), opacity .34s ease;
}
.companies__grid.is-leaving, .companies__state-head.is-leaving {
  transform: translateX(32px); opacity: 0;
  transition-duration: .18s; transition-timing-function: ease-in;
}
.companies__grid.is-entering, .companies__state-head.is-entering {
  transform: translateX(-32px); opacity: 0; transition: none;
}
.companies__state-head .t-caption { color: var(--color-gray-400); }


@media (max-width: 1099px) {
  .companies__grid { gap: 40px 16px; }
  .companies__grid.is-centered .tile { width: calc((100% - 32px) / 3); }
}

@media (max-width: 767px) {
  /* companies → 2-row swipe grid, no filters */
  .companies { padding: 64px 0; gap: 28px; background: var(--color-off-white); }   /* Figma mobile: Off-White */
  .companies__head { padding: 0 20px; gap: 20px; }
  [data-page="home"] .companies { padding: 40px 0; gap: 40px; }
  [data-page="home"] .companies__head { gap: 40px; }
  .companies__tabs, .companies__map, .companies__state-head { display: none !important; }
  .companies__grid, .companies__grid.is-centered {
    display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto);
    grid-auto-columns: 160px; gap: 28px 12px;
    overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 20px; scroll-padding-inline: 20px;
    scrollbar-width: none;
  }
  .companies__grid::-webkit-scrollbar { display: none; }
  .companies__grid .tile, .companies__grid.is-centered .tile { width: 160px; scroll-snap-align: start; gap: 12px; }
  .tile__overlay { display: none; }
  .tile__name { font-size: var(--fs-card-title); line-height: var(--lh-card); }   /* mobile unchanged */
  .companies__swipe-hint { display: block; color: var(--color-gray-400); }
}

/* Homeowners mobile: soft Gray-100 → Off-White fade (Figma "For Homeowners – Mobile") */
@media (max-width: 767px) {
  [data-page="homeowners"] .companies { background: linear-gradient(180deg, var(--color-gray-100), var(--color-off-white)); }
}

/* ---------- Mobile (<768): Cards / List view toggle (10/03) ----------
   Two icon tabs in the filter bar's design (Phosphor SquaresFour / ListBullets). Cards (default)
   keeps the swipe row of tiles above; List (.is-list) shows every company once, A–Z, as compact rows. Rows: 112×74 photo,
   name (Card Title), location (Caption, Gray-400) and Phosphor's ArrowUpRight, since each opens the
   company's site in a new tab. Every company is listed; the toggle sits centred, with no count. */
.companies__viewbar { display: none; }
@media (max-width: 767px) {
  .companies__viewbar { display: flex; align-self: stretch; justify-content: center; padding: 0 20px; }
  .companies__sort {
    display: flex; gap: 2px; padding: 4px;
    background: var(--color-gray-200); border-radius: var(--radius-pill);
  }
  .companies__sort .chip {
    flex: none; min-height: 0; padding: 9px 18px; display: inline-flex; align-items: center; justify-content: center; background: transparent; color: var(--color-gray-400);
    transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
  }
  .companies__sort .chip.is-active { background: var(--color-white); color: var(--color-maroon); box-shadow: 0 1px 4px rgba(0, 0, 0, .08); }
  .companies__sort .chip:focus-visible { outline: 2px solid var(--color-maroon); outline-offset: -2px; }

  .companies .companies__grid.is-list {
    display: flex; flex-direction: column; align-items: stretch; gap: 0; align-self: stretch;
    overflow: visible; scroll-snap-type: none; padding: 0 20px; min-height: 0 !important;
  }
  .companies .companies__grid.is-list .tile {
    width: auto; flex-direction: row; align-items: center; gap: 16px; padding: 14px 0;
    border-bottom: 1px solid var(--color-gray-200); color: inherit; text-decoration: none;
  }
  .companies .companies__grid.is-list .tile::after {   /* Phosphor ArrowUpRight (regular, MIT): opens in a new tab */
    content: ""; flex: none; width: 20px; height: 20px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23380303'%3E%3Cpath d='M200,64V168a8,8,0,0,1-16,0V83.31L69.66,197.66a8,8,0,0,1-11.32-11.32L172.69,72H88a8,8,0,0,1,0-16H192A8,8,0,0,1,200,64Z'/%3E%3C/svg%3E") no-repeat center / 20px 20px;
  }
  .companies .companies__grid.is-list .tile__media { width: 112px; height: 74px; aspect-ratio: auto; flex: none; border-radius: 12px; }
  .companies .companies__grid.is-list .tile__text { flex: 1 1 auto; min-width: 0; gap: 6px; }
  .companies .companies__grid.is-list .tile__name {
    font-family: var(--font-serif); font-size: var(--fs-card-title); line-height: var(--lh-card);
    color: var(--color-black); text-transform: none; letter-spacing: -.01em;
    text-box: normal; overflow: visible;   /* no trimmed or clipped text in the list */
  }
  .companies .companies__grid.is-list .tile__loc {
    font-family: var(--font-sans); font-size: 14px; line-height: 1.38; color: var(--color-gray-400);
    text-transform: none; letter-spacing: -.01em; white-space: normal; overflow: visible; text-overflow: clip; text-box: normal;
  }
  .companies .companies__swipe-hint { display: none; }
}

/* Mobile: 1px Gray-200 divider under the companies module on every page (Figma "Companies module /
   Mobile" bottom stroke; Homeowners already had it). */
@media (max-width: 767px) {
  .companies { border-bottom: 1px solid var(--color-gray-200); }
}