@charset "UTF-8";
/* ==========================================================================
   cire-islands.css — Featured Islands, homepage
   CIRECaribbean.com · 2026-08-15 · branch redesign/featured-islands

   WHY THIS FILE EXISTS (and why it is not a patch on cire-luxury.css)
   ------------------------------------------------------------------
   The old section reused the shared `.community-card--landing` partial, which
   is also rendered by archive-mrt_community.php (/neighborhoods/) and by
   agents/communities-page.php (agent microsites). Three stylesheets were
   fighting over it and the result, measured in a true 375px viewport on
   2026-08-15, was:

     grid-template-columns : 1fr          (css/cire-luxury.css, 0,2,0)
                             ^ beats style.css's mobile `repeat(2,1fr)` (0,1,1)
     padding-bottom        : 100%         (style.css @media max-width:728px)
     aspect-ratio          : 4 / 5        (css/cire-luxury.css)

   aspect-ratio + a 100% bottom padding leaves the flex content box ZERO pixels
   tall, so `align-items:flex-end` parked `.community-card__content` 16px ABOVE
   the photo — white type on the white page, i.e. invisible labels — while the
   two buttons were squeezed into the top three pixels of the image. The same
   aspect-ratio also cancels grid stretch, so each card measured 300px wide in a
   375px column and the section had a ragged 75px right-hand gutter. One column
   x 20 islands made the section 8,426px tall, 60% of a 14,156px homepage.

   So this is a rebuild on its own markup (components/communities/
   landing-card-island.php) with its own class namespace `.cire-island*`.
   Nothing here selects a theme-managed class, so nothing here can be
   overridden by — or can override — style.css, css/app.css or
   css/cire-luxury.css. The /neighborhoods/ index and the agent microsites keep
   the old partial and are deliberately untouched.

   ENQUEUE: front-page.php, before get_header(), dependent on 'cire-luxury'
   (which is itself dependent on 'neutrino_styles' = css/app.css). app.css is
   enqueued late, from fuelidx_wp_head; without that dependency chain this file
   prints first and silently no-ops.

   Custom properties are read from cire-luxury.css's :root but every one of them
   carries a literal fallback here, so this file still renders correctly if that
   file is ever renamed or reordered.

   Container follows ALIGNMENT-SPEC.md D1 (max-width 1400, padding-inline
   16/24/40/64). Spacing follows D2 (base 8, 4px half-step for optical nudges).
   Type is clamp()-based with minimums tuned at 375px. Radius 0, no shadows (D4).
   ========================================================================== */

/* ---- band ---------------------------------------------------------------- */
.cire-islands {
  background: var(--cire-white, #ffffff);
  padding-block: clamp(48px, 7vw, 104px);
}

.cire-islands__inner {
  width: 100%;
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: 16px;
}

/* ---- section head -------------------------------------------------------- */
.cire-islands__head {
  margin-bottom: clamp(24px, 3.4vw, 40px);
}

.cire-islands__eyebrow {
  display: block;
  font-family: var(--cire-sans, "Proxima Nova", "Helvetica Neue", Helvetica, Arial, sans-serif);
  font-size: clamp(0.62rem, 1.9vw, 0.68rem);
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--cire-gray-med, #76787b);
  margin-bottom: 8px;
}

.cire-islands__title {
  margin: 0;
  font-family: var(--cire-serif, "Playfair Display", Georgia, "Times New Roman", serif);
  font-weight: 500;
  font-size: clamp(1.75rem, 5.6vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: 0.005em;
  color: var(--cire-charcoal, #384249);
  text-transform: none;
  text-wrap: balance;
}

/* ---- the grid ------------------------------------------------------------
   20 islands. Column counts are chosen so EVERY row is full at every
   breakpoint: 20 / 2 = 10, 20 / 4 = 5, 20 / 5 = 4. A three-column band was
   rejected because it leaves a visible empty cell in the last row.
   -------------------------------------------------------------------------- */
.cire-islands__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

/* ---- one island tile ----------------------------------------------------- */
.cire-island {
  position: relative;
  display: flex;
  align-items: flex-end;        /* ALIGNMENT-SPEC D3 exception 3: caption pinned
                                   to the bottom of an image — stated, not default */
  aspect-ratio: 1 / 1;          /* the square grid Nick asked for */
  overflow: hidden;
  background: #2c363d;          /* holds the square before the photo decodes */
  border: 0;
  border-radius: 0;
  isolation: isolate;
}

.cire-island__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.001);      /* avoids a 1px seam on scale-back in Safari */
  transition: transform 900ms cubic-bezier(0.2, 0.6, 0.2, 1);
}

/* The plate is the contrast treatment, not a decoration. Nick's contrast law is
   absolute: a dark ground never carries dark text, and a photograph counts as a
   ground.

   The gradient stops are in PIXELS, not percentages, on purpose. Percentage
   stops resolve against the plate's own height, which changes with the island
   name's line count ("British Virgin Islands" wraps to two lines, "Saba" does
   not) and with the type clamp at each breakpoint — so a percentage scrim puts
   different alpha under different labels and the weakest one is the one nobody
   checks. With px stops the fade runway is fixed at 56px (64px >= 1024px) and
   the first text pixel always lands at ~0.76 alpha, whatever the tile size or
   the label length.

   Worst case is therefore computable rather than sampled: over a photograph of
   PURE WHITE, 0.76 alpha of rgb(16,20,23) resolves to ~#4a4c4e, which is
   7.9:1 against white type — comfortably past WCAG AA at any size. Every real
   photograph is darker than that, so every one of the 20 tiles passes by
   construction, and so will any photograph swapped in later. Verified by
   rendering the whole grid with every image replaced by a pure-white bitmap
   (scratchpad shot m-after-375-whiteworstcase.png) as well as with the real
   photographs. */
/* NOT position:absolute, and that is load-bearing. An absolutely (or relatively)
   positioned plate becomes the containing block for the stretched link's
   ::after below, which would then cover only the plate instead of the whole
   tile — measured, not assumed: with the plate positioned, elementFromPoint at
   the top of the tile returned the <img>, so three quarters of every tile was
   dead to the tap. `isolation: isolate` gives the plate its own stacking
   context so it still paints above the absolutely positioned photograph
   (DOM order decides, and the plate comes second) WITHOUT establishing a
   containing block. The tile is the flex parent; align-items:flex-end pins the
   plate to the bottom. */
.cire-island__plate {
  position: static;
  isolation: isolate;
  width: 100%;
  padding: clamp(12px, 3.2vw, 18px);
  padding-top: 56px;
  background: linear-gradient(
    to bottom,
    rgba(16, 20, 23, 0) 0,
    rgba(16, 20, 23, 0.16) 20px,
    rgba(16, 20, 23, 0.46) 38px,
    rgba(16, 20, 23, 0.72) 52px,
    rgba(16, 20, 23, 0.86) 74px,
    rgba(16, 20, 23, 0.93) 100%
  );
  transition: background 400ms ease;
  pointer-events: none;         /* the links below re-enable their own */
}

.cire-island__region {
  display: block;
  font-family: var(--cire-sans, "Proxima Nova", "Helvetica Neue", Helvetica, Arial, sans-serif);
  font-size: clamp(0.58rem, 1.8vw, 0.62rem);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 4px;
}

.cire-island__name {
  margin: 0;
  font-family: var(--cire-serif, "Playfair Display", Georgia, "Times New Roman", serif);
  font-weight: 500;
  font-size: clamp(0.95rem, 3.6vw, 1.3rem);
  line-height: 1.14;
  letter-spacing: 0.005em;
  color: var(--cire-white, #ffffff);
  text-transform: none;
}

.cire-island__link {
  color: inherit;
  text-decoration: none;
  pointer-events: auto;
}

/* Stretched link: the whole tile opens the island overview page. The markup
   keeps ONE anchor per destination, so both original link targets survive and
   no anchor is nested inside another. */
.cire-island__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.cire-island__listings {
  position: relative;
  z-index: 2;                   /* stays clickable above the stretched link */
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-family: var(--cire-sans, "Proxima Nova", "Helvetica Neue", Helvetica, Arial, sans-serif);
  font-size: clamp(0.66rem, 2.2vw, 0.72rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.86);
  text-decoration: none;
  transition: color 200ms ease;
}

.cire-island__listings::after {
  content: "";
  width: 16px;
  height: 1px;
  background: currentColor;
  transition: width 300ms cubic-bezier(0.2, 0.6, 0.2, 1);
}

/* Hover is a desktop affordance only — on touch the tile is simply tappable and
   every label is already visible at rest. */
@media (hover: hover) and (pointer: fine) {
  .cire-island:hover .cire-island__img {
    transform: scale(1.055);
  }
  .cire-island:hover .cire-island__plate {
    background: linear-gradient(
      to bottom,
      rgba(16, 20, 23, 0.1) 0,
      rgba(16, 20, 23, 0.3) 20px,
      rgba(16, 20, 23, 0.6) 38px,
      rgba(16, 20, 23, 0.82) 52px,
      rgba(16, 20, 23, 0.92) 74px,
      rgba(16, 20, 23, 0.96) 100%
    );
  }
  .cire-island:hover .cire-island__listings,
  .cire-island__listings:hover {
    color: var(--cire-gold, #c9ac77);
  }
  .cire-island:hover .cire-island__listings::after {
    width: 26px;
  }
}

/* Keyboard focus has to be visible on both destinations. */
.cire-island__link:focus-visible::after {
  box-shadow: inset 0 0 0 2px var(--cire-gold, #c9ac77);
}
.cire-island__listings:focus-visible {
  outline: 2px solid var(--cire-gold, #c9ac77);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .cire-island__img,
  .cire-island__plate,
  .cire-island__listings,
  .cire-island__listings::after {
    transition: none;
  }
  .cire-island:hover .cire-island__img {
    transform: scale(1.001);
  }
}

/* ---- concierge card (ACF community_card row, options) --------------------
   Closes the index at full width instead of being squeezed into a photo tile.
   The background photograph is whatever the ACF field holds; the charcoal
   scrim below is what guarantees the contrast law regardless of that image.
   -------------------------------------------------------------------------- */
.cire-islands__cta {
  position: relative;
  isolation: isolate;
  margin-top: 12px;
  padding: clamp(28px, 5.2vw, 56px);
  background-color: var(--cire-charcoal, #384249);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

.cire-islands__cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    100deg,
    rgba(46, 55, 61, 0.95) 0%,
    rgba(46, 55, 61, 0.9) 55%,
    rgba(46, 55, 61, 0.82) 100%
  );
}

.cire-islands__cta-body,
.cire-islands__cta-link {
  position: relative;
  z-index: 1;
}

.cire-islands__cta-eyebrow {
  display: block;
  font-family: var(--cire-sans, "Proxima Nova", "Helvetica Neue", Helvetica, Arial, sans-serif);
  font-size: clamp(0.62rem, 1.9vw, 0.68rem);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--cire-gold, #c9ac77);
  margin-bottom: 8px;
}

.cire-islands__cta-title {
  margin: 0 0 12px;
  font-family: var(--cire-serif, "Playfair Display", Georgia, "Times New Roman", serif);
  font-weight: 500;
  font-size: clamp(1.35rem, 4.4vw, 2rem);
  line-height: 1.16;
  color: var(--cire-white, #ffffff);
  text-transform: none;
  text-wrap: balance;
}

.cire-islands__cta-text {
  max-width: 62ch;
}

.cire-islands__cta-text p {
  margin: 0;
  font-family: var(--cire-sans, "Proxima Nova", "Helvetica Neue", Helvetica, Arial, sans-serif);
  font-size: clamp(0.92rem, 2.4vw, 1rem);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.9);
}

.cire-islands__cta-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin-top: 24px;
  padding: 14px 32px;
  background: var(--cire-white, #ffffff);
  border: 0;
  border-radius: 0;
  font-family: var(--cire-sans, "Proxima Nova", "Helvetica Neue", Helvetica, Arial, sans-serif);
  font-size: clamp(0.72rem, 2.1vw, 0.78rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cire-charcoal, #384249);
  text-decoration: none;
  transition: background 220ms ease, color 220ms ease;
}

.cire-islands__cta-link:hover,
.cire-islands__cta-link:focus {
  background: var(--cire-gold, #c9ac77);
  color: #2c3338;
}

.cire-islands__cta-link:focus-visible {
  outline: 2px solid var(--cire-gold, #c9ac77);
  outline-offset: 3px;
}

/* ==========================================================================
   729px and up — Foundation "medium". Four columns: 20 / 4 = 5 full rows.
   ========================================================================== */
@media (min-width: 729px) {
  .cire-islands__inner {
    padding-inline: 24px;
  }
  .cire-islands__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }
  .cire-islands__cta {
    margin-top: 16px;
  }
}

/* ==========================================================================
   1024px and up — the concierge card becomes one row.
   ========================================================================== */
@media (min-width: 1024px) {
  .cire-islands__inner {
    padding-inline: 40px;
  }
  .cire-islands__grid {
    gap: 20px;
  }
  .cire-island__plate {
    padding-top: 64px;
  }
  .cire-islands__cta {
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;      /* ALIGNMENT-SPEC D3: rows of differing type size centre */
    justify-content: space-between;
    column-gap: 48px;
  }
  .cire-islands__cta-body {
    flex: 1 1 auto;
    min-width: 0;
  }
  .cire-islands__cta-link {
    flex: 0 0 auto;
    margin-top: 0;
  }
}

/* ==========================================================================
   1366px and up — Foundation "large". Five columns: 20 / 5 = 4 full rows.
   ========================================================================== */
@media (min-width: 1366px) {
  .cire-islands__inner {
    padding-inline: 64px;
  }
  .cire-islands__grid {
    grid-template-columns: repeat(5, 1fr);
  }
}