/* The Sponsor directory ("Caribbean light"): /sponsors, the category pages, the Sponsor card and
   the Sponsor blocks on /moving, the path pages and My Move (owner-approved mockup
   compare/sponsors.html, frames C and D). Built on base.css (its tokens and components: .band,
   .chip, .more, .button, .frame…); this file adds only what these surfaces need.

   Businesses look like businesses: square logos with square corners and the dark "Sponsor" /
   "Honorary Sponsor" chip (never the round portraits of Ambassadors). Large type, whole-card links
   with a strong focus ring, 48 px tap targets, no sideways scroll at 320 px. Logical properties
   only (RTL-ready). The card and the hub/journey blocks link this file themselves. */

/* ---- Page frame: the wrapper carries the page's microdata and lets bands bleed full width ----- */

.dir-page { display: contents; }
.dir-page > * { grid-column: content; }
.dir-page > .band {
  grid-column: full;
  padding-inline: max(var(--gutter), (100% - var(--content)) / 2);
  border-radius: 0;
}
/* The first band sits close to the header (on /sponsors a <meta> comes first: the page's microdata name). */
.dir-page > .band:first-child, .dir-page > meta:first-child + .band { padding-block-start: var(--space-l); }

.dir-kicker { display: inline-flex; align-items: center; gap: 0.55rem; }
.dir-square {
  display: inline-block;
  inline-size: 0.8rem;
  block-size: 0.8rem;
  background: var(--ink);
  border-radius: 2px;
}

/* ---- /sponsors: the spot's heading (showcase's partial holds the H1 and the lead) ------------- */

.dir-spot { padding-block-end: var(--space-l); }
.dir-spot .sponsor-spot h1 { font-size: var(--display-size); line-height: 1.05; margin-block: var(--space-3xs) var(--space-s); }
.dir-spot .sponsor-spot .lead { max-inline-size: 46rem; }

/* ---- Category cards (key services, more services, other services, the hub block) ------------- */

.dir-keys-list, .dir-kinds, .dir-minis, .dir-cards, .dir-towns, .dir-also-list, .dir-guides, .dir-see-all, .dir-pills {
  list-style: none;
  padding: 0;
  margin: 0;
}
.dir-keys-list, .dir-kinds, .dir-cards, .dir-towns, .dir-minis {
  display: grid;
  gap: var(--space-m);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16.5rem), 1fr));
}
.dir-keys-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); }
:is(.dir-keys-list, .dir-kinds, .dir-cards, .dir-towns, .dir-minis) > li { max-inline-size: none; min-inline-size: 0; }

.dir-cat {
  position: relative;
  display: grid;
  gap: var(--space-xs);
  block-size: 100%;
  padding: var(--space-m);
  border: 2px solid var(--sand-deep);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  text-decoration: none;
  box-shadow: var(--shadow-s);
}
.dir-cat:hover { border-color: var(--lagoon-line); color: var(--ink); }
.dir-cat:focus-visible { outline: var(--focus); outline-offset: 3px; }
.dir-cat-art { display: block; border-radius: var(--radius-s); background: var(--foam); overflow: hidden; }
.dir-cat-art img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 4 / 3; object-fit: contain; }
.dir-cat-text { display: grid; gap: var(--space-3xs); min-inline-size: 0; }
.dir-cat-name { font: 800 var(--text-l)/1.25 var(--display); overflow-wrap: anywhere; }
.dir-cat-line { color: var(--ink-soft); }
.dir-cat-meta { font: 700 var(--text-s)/1.4 var(--display); color: var(--coral-ink); }
.dir-cat-mini { grid-template-columns: auto minmax(0, 1fr); align-items: center; padding: var(--space-s); }
.dir-cat-mini-art { inline-size: 4rem; block-size: auto; border-radius: var(--radius-s); background: var(--foam); }

.dir-also { padding: var(--space-m); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-s); }
.dir-also h3 { margin-block: 0 var(--space-xs); }
.dir-also-list li { max-inline-size: none; }
.dir-also-list a {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0 var(--space-xs);
  align-items: center;
  min-block-size: var(--tap);
  font: 700 var(--text-m)/1.3 var(--display);
}
.dir-also-count { color: var(--ink-soft); font-weight: 600; }

/* ---- Town tiles --------------------------------------------------------------------------------- */

.dir-town { display: grid; gap: var(--space-xs); color: var(--ink); text-decoration: none; }
.dir-town:focus-visible { outline: var(--focus); outline-offset: 4px; border-radius: var(--radius); }
.dir-town-photo { display: block; overflow: hidden; }
.dir-town-photo img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.dir-town-name { font: 800 var(--text-l)/1.25 var(--display); text-decoration: underline; text-decoration-color: var(--lagoon-line); text-underline-offset: 0.2em; }

/* ---- "Become a Retire.do Sponsor" ------------------------------------------------------------------ */

.dir-join { display: grid; gap: var(--space-xl); align-items: center; }
@media (min-width: 52rem) { .dir-join { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
.dir-join .cluster { gap: var(--space-s) var(--space-l); align-items: center; }
.dir-preview { display: grid; gap: var(--space-xs); max-inline-size: 22rem; }
.dir-preview-tag { font: 700 var(--text-s)/1.3 var(--display); color: var(--ink-soft); margin: 0; }
.sponsor-card-cover-empty, .sponsor-card-logo-empty {
  display: grid;
  place-items: center;
  border: 2px dashed var(--field);
  color: var(--ink-soft);
  font: 700 var(--text-s)/1.2 var(--display);
  text-align: center;
}
.dir-card-empty .sponsor-card-name { color: var(--ink); }

/* ---- The Sponsor card (templates/sponsor/_card.twig) -------------------------------------------- */

.sponsor-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  block-size: 100%;
  padding: 0 var(--space-m) var(--space-m);
  border: 2px solid var(--sand-deep);
  border-radius: var(--radius-s);
  background: var(--white);
  box-shadow: var(--shadow-s);
  overflow: hidden;
  min-inline-size: 0;
}
.sponsor-card:has(.sponsor-card-name a:focus-visible) { outline: var(--focus); outline-offset: 3px; }
.sponsor-card:hover:has(.sponsor-card-name a) { border-color: var(--lagoon-line); }
.sponsor-card-cover {
  margin-inline: calc(-1 * var(--space-m));
  aspect-ratio: 16 / 7;
  background: linear-gradient(135deg, var(--foam), var(--sand));
}
.sponsor-card-cover img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.sponsor-card-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-2xs);
  margin-block-start: -2.4rem;
}
.sponsor-card-logo {
  inline-size: 4.4rem;
  block-size: 4.4rem;
  flex: none;
  border: 2px solid var(--white);
  border-radius: 4px;
  background: var(--white);
  box-shadow: var(--shadow-s);
  overflow: hidden;
}
.sponsor-card-logo img { display: block; inline-size: 100%; block-size: 100%; object-fit: contain; }
.sponsor-card .sponsor-chip, .dir-preview .sponsor-chip {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding-block: 0.3rem;
  padding-inline: 0.7rem;
  border-radius: 4px;
  background: var(--ink);
  color: var(--white);
  font: 800 0.92rem/1.25 var(--display);
}
.sponsor-chip-honorary_sponsor { background: var(--lagoon-deep); }
.sponsor-card-category { margin: 0; font: 700 var(--text-s)/1.3 var(--display); color: var(--coral-ink); }
.sponsor-card-name { margin: 0; font-size: var(--h4); line-height: 1.25; overflow-wrap: anywhere; }
.sponsor-card-name a { color: var(--ink); text-decoration: none; }
/* The name's link covers the whole card. */
.sponsor-card-name a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.sponsor-card-name a:focus-visible { outline: none; }
.sponsor-card-tagline { margin: 0; color: var(--ink-soft); overflow-wrap: anywhere; }
.sponsor-card-focuses { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; padding: 0; margin: 0; }
.sponsor-card-focuses li { max-inline-size: none; }
.sponsor-card-facts, .sponsor-card-guide {
  display: flex;
  gap: 0.45rem;
  align-items: flex-start;
  margin: 0;
  font-size: var(--text-s);
  color: var(--ink-soft);
  overflow-wrap: anywhere;
}
.sponsor-card-facts .icon, .sponsor-card-guide .icon { flex: none; inline-size: 1.3rem; block-size: 1.3rem; margin-block-start: 0.15rem; }
/* The guide link sits above the card's covering link, so it stays its own target. */
.sponsor-card-guide a { position: relative; z-index: 2; }
.dir-card-empty .sponsor-card-tagline, .dir-card-empty .sponsor-card-facts { display: block; }

/* ---- Lists of Sponsors: the Honorary band, results, "Show more" ---------------------------------- */

.dir-results-head { display: grid; gap: var(--space-2xs); margin-block-end: var(--space-m); }
.dir-results-head h2 { margin: 0; }
.dir-showing { margin: 0; font: 700 var(--text-m)/1.4 var(--display); color: var(--ink-soft); }
.dir-count { margin: 0; font: 800 var(--text-l)/1.3 var(--display); }
.dir-daily { justify-self: start; }
.dir-band { margin-block-end: var(--space-l); }
.dir-band-honorary {
  padding: var(--space-m);
  border-radius: var(--radius);
  background: var(--foam);
}
.dir-band-line { margin-block: 0 var(--space-s); font: 700 var(--text-m)/1.4 var(--display); }
.dir-show-more { margin-block-start: var(--space-l); }
.dir-none { margin-block: var(--space-m); }
.dir-clear { margin-block-start: var(--space-m); }
.dir-disclosure {
  display: flex;
  gap: var(--space-xs);
  align-items: flex-start;
  margin-block: var(--space-l) 0;
  padding: var(--space-s) var(--space-m);
  border-radius: var(--radius-s);
  background: var(--sand);
  color: var(--ink);
  font-size: var(--text-s);
}
.dir-disclosure .icon { flex: none; inline-size: 1.5rem; block-size: 1.5rem; }

/* ---- Category page: breadcrumb, hero, filters ------------------------------------------------------ */

.dir-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.6rem;
  list-style: none;
  padding: 0;
  margin-block: var(--space-s) 0;
  font: 700 0.95rem/1.3 var(--display);
  color: var(--ink-soft);
}
.dir-crumbs li { display: inline-flex; align-items: center; max-inline-size: none; }
.dir-crumbs a { display: inline-flex; align-items: center; min-block-size: var(--tap); }
.dir-crumbs li + li::before { content: "/"; margin-inline-end: 0.6rem; }

.dir-cathero { display: grid; gap: var(--space-l); align-items: center; padding-block-end: var(--space-l); }
@media (min-width: 48rem) { .dir-cathero { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
.dir-cathero h1 { margin-block: var(--space-3xs) var(--space-s); overflow-wrap: anywhere; }
.dir-cathero-art { justify-self: center; max-inline-size: 20rem; inline-size: 100%; }
.dir-cathero-art img { display: block; inline-size: 100%; block-size: auto; }
@media (max-width: 47.99rem) { .dir-cathero-art { max-inline-size: 12rem; } }

.dir-filters { margin-block-end: var(--space-l); }
.dir-filters-pills { display: grid; gap: var(--space-m); }
.dir-filter-title { margin: 0 0 var(--space-2xs); font-size: var(--text-l); }
.dir-pills { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.dir-pills li { max-inline-size: none; }
.dir-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-block-size: var(--tap);
  padding-inline: var(--space-s);
  border: 2px solid var(--sand-deep);
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--ink);
  font: 700 var(--text-m)/1.2 var(--display);
  text-decoration: none;
}
.dir-pill:hover { border-color: var(--lagoon-line); color: var(--ink); }
.dir-pill[aria-current="true"] { border-color: var(--lagoon-deep); background: var(--foam); box-shadow: inset 0 0 0 1px var(--lagoon-deep); }
.dir-pill .flag, .dir-menu-row .flag { flex: none; }

.dir-filters-menus { display: none; gap: var(--space-xs); }
.dir-menu { border: 2px solid var(--sand-deep); border-radius: var(--radius-s); background: var(--white); }
.dir-menu summary {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0 var(--space-xs);
  align-items: center;
  min-block-size: var(--tap);
  padding: var(--space-2xs) var(--space-s);
  cursor: pointer;
  font: 800 var(--text-m)/1.3 var(--display);
}
.dir-menu summary:focus-visible { outline: var(--focus); outline-offset: 2px; }
.dir-menu-value { font-weight: 600; color: var(--ink-soft); }
.dir-menu ul { list-style: none; padding: 0 var(--space-s) var(--space-s); margin: 0; }
.dir-menu li { max-inline-size: none; }
.dir-menu-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-block-size: var(--tap);
  font: 700 var(--text-m)/1.3 var(--display);
}
.dir-menu-row[aria-current="true"] { color: var(--ink); text-decoration-thickness: 3px; }

/* A phone shows the three menus, a computer the pills (the same links). */
@media (max-width: 47.99rem) {
  .dir-filters-pills { display: none; }
  .dir-filters-menus { display: grid; }
}

.dir-whatdo { margin-block-start: var(--space-xl); }
.dir-whatdo-list { list-style: none; padding: 0; display: grid; gap: var(--space-s); }
.dir-whatdo-list li { display: flex; gap: var(--space-xs); align-items: flex-start; max-inline-size: none; }
.dir-whatdo-list .icon { flex: none; inline-size: 1.6rem; block-size: 1.6rem; }

.dir-moreband-grid { display: grid; gap: var(--space-xl); }
@media (min-width: 52rem) { .dir-moreband-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dir-guides { display: grid; gap: var(--space-xs); }
.dir-guides li { max-inline-size: none; }
.dir-guides a {
  display: flex;
  gap: var(--space-xs);
  align-items: center;
  min-block-size: var(--tap);
  font: 700 var(--text-m)/1.3 var(--display);
}
.dir-guides .icon { flex: none; inline-size: 1.6rem; block-size: 1.6rem; }
.dir-minis { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }

/* ---- Hub and My Move blocks --------------------------------------------------------------------- */

.dir-see-all { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-l); margin-block-start: var(--space-m); }
.dir-see-all li { max-inline-size: none; }
.dir-step { display: grid; gap: var(--space-s); }
.dir-step-lead { margin: 0; }
.dir-cards-step { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }