/*
 * Destinations hub — editorial (C2 Broadsheet) reskin. Loaded on the
 * use_editorial stack (header.html); design tokens ONLY (design-system/tokens.css).
 *
 * The hero masthead + region section rhythm come from the editorial engine
 * (blocks.css: .im-block-section / .im-wrap / .im-seclab). This file owns only
 * the region card grid and the uniform, badge-free country card
 * (service_level is internal — never rendered).
 * Tap targets >= 44px; spacing on the 4px token scale.
 */

/*
 * Compact country header (_landing_info.html) ------------------------------
 * A slim header — NOT the tall hero — so the first visa cards sit near the top
 * of the page. Intro (name + one context line) on the left; the interest CTA
 * inline on the right at >=768px, stacked below on mobile. margin-bottom carries
 * normal section rhythm into the listing (no large empty band between them).
 */
.destinations-country-header {
  display: flex;
  flex-direction: column;
  gap: var(--im-space-5);
  margin-bottom: var(--im-space-8);
}

@media (min-width: 768px) {
  .destinations-country-header {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--im-space-8);
  }
}

.destinations-country-header__intro {
  min-width: 0;
}

.destinations-country-header__title {
  font-family: var(--im-font-display);
  font-weight: 600;
  font-size: clamp(1.9rem, 3.6vw, 2.75rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--im-ink);
  margin: 0;
}

.destinations-country-header__context {
  font-family: var(--im-font-display);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.45;
  color: var(--im-text-200);
  max-width: 46ch;
  margin: var(--im-space-3) 0 0;
}

/*
 * Information-only landing (_landing_info.html) --------------------------------
 * The interest CTA sits inline on the right at >=768px, stacked below the intro
 * on mobile. Never shrinks.
 */
.destinations-country-header .destinations-landing__cta {
  flex-shrink: 0;
}

/*
 * "How we help" card row — three uniform, static info cards (im-modcard--static).
 * 1-up on mobile, 3-up from tablet so the trio reads as an even set rather than
 * the im-modgrid 2+1 wrap. Rhythm below the section heading matches im-modgrid.
 */
.destinations-help-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--im-space-5);
  margin-top: var(--im-space-8);
}

@media (min-width: 768px) {
  .destinations-help-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--im-space-6);
  }
}

/*
 * Region card grid. Explicit responsive columns (2-up mobile -> 3-up tablet ->
 * 4-up desktop) so a lone destination never exceeds a single column — it reads
 * as an intentional tile, not a full-bleed banner, while one market is live.
 */
/* Card grid only. The card itself is `.im-destcard` in
   design-system/blocks.css — the SAME card the global-home picker renders, so
   the two surfaces cannot drift. Spec:
   docs/superpowers/specs/2026-08-04-destination-cards-design.md */
.destinations-grid {
  display: grid;
  /* min(320px, 100%) so the track can shrink below its floor — see the twin rule
     on .im-destinations-picker__grid in blocks.css. The two surfaces render the
     same card and must not drift. */
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: var(--im-space-5);
  margin-top: var(--im-space-6);
}

/*
 * Business home rich pass (businesses.html) ---------------------------------
 * Value strip (im-pillars): it is the first thing in its section, so the
 * section's own top padding carries the rhythm above it. Drop the block's
 * default top margin and space the first group label below instead.
 */
.destinations-value-strip {
  margin-top: 0;
  margin-bottom: var(--im-space-10);
}

/* Repeated registry groups ("Visas & routes", "Compliance Software"): .im-modgrid
   only carries margin-top (the gap above itself), so back-to-back groups leave
   the next heading flush against the previous group's cards. */
.im-modgrid + .im-seclab {
  margin-top: var(--im-space-10);
}

/* The routes index ("Routes you can hire on"). It is a new REGION, not another
   registry group, so it needs more air above it than the space-10 that separates
   two groups — and the sibling rule above cannot reach its headings anyway, now
   that they sit inside the section wrapper the anchor and heading needed. */
.destinations-hire-on {
  margin-top: var(--im-space-16);
}

/* Vetted feature list inside a registry card — hairline rows, modcard scale. */
.destinations-offer-features {
  list-style: none;
  margin: var(--im-space-4) 0 0;
  padding: 0;
}

.destinations-offer-features li {
  display: flex;
  gap: var(--im-space-2);
  padding: var(--im-space-2) 0;
  border-top: 1px solid var(--im-hairline);
  font-size: 13px;
  line-height: 1.5;
  color: var(--im-text-muted);
}

.destinations-offer-features li::before {
  content: "—";
  color: var(--im-accent-200);
}

/* Demo CTA band — im-midcta with an added supporting line under the title. */
.destinations-midcta {
  margin-top: var(--im-space-10);
}

.destinations-midcta__intro {
  min-width: 0;
}

.destinations-midcta__body {
  font-family: var(--im-font-body, "Hanken Grotesk", system-ui, -apple-system, sans-serif);
  font-size: 15px;
  line-height: 1.55;
  color: var(--im-paper);
  opacity: 0.82;
  max-width: 52ch;
  margin: var(--im-space-3) 0 0;
}

/* Empty state -------------------------------------------------------------- */
.destinations-empty {
  font-family: var(--im-font-body, "Hanken Grotesk", system-ui, -apple-system, sans-serif);
  color: var(--im-text-muted);
  margin: 0;
}

/* No reduced-motion block here: nothing in this file transitions any more. The
   card's own handling lives with `.im-destcard` in design-system/blocks.css. */