/* ==========================================================================
   Sky Ceylon — Shared Components

   The primitives every section block composes: the section wash and rhythm,
   the section head, check lists, pills, panels, quotes, arrow links, the
   photo collage and the overlapping figure stack.

   FluentSnippets group: Shared Styles | type: css | run_at: wp_head
   load_as_file: yes | load_in_block_editor: yes
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. SECTION WASH AND RHYTHM
   Every ported section is one of five washes. Plum flips the text colour, so
   headings, body copy and borders all read from the same three variables
   rather than each component overriding itself.
   -------------------------------------------------------------------------- */
.skyc-section {
  --skyc-fg: var(--wp--preset--color--body);
  --skyc-fg-strong: var(--wp--preset--color--contrast);
  --skyc-line: var(--wp--preset--color--line);
  --skyc-card: var(--wp--preset--color--base);

  position: relative;
  padding-top: var(--wp--custom--section-y);
  padding-bottom: var(--wp--custom--section-y);
  background-color: var(--wp--preset--color--base);
  color: var(--skyc-fg);
}
.skyc-section--grey    { background-color: var(--wp--preset--color--surface-grey); }
.skyc-section--magenta { background-color: var(--wp--preset--color--surface-magenta); }
.skyc-section--gold    { background-color: var(--wp--preset--color--surface-gold); }
.skyc-section--plum {
  --skyc-fg: rgba(255, 255, 255, 0.84);
  --skyc-fg-strong: var(--wp--custom--heading-invert);
  --skyc-line: rgba(255, 255, 255, 0.18);
  --skyc-card: rgba(255, 255, 255, 0.06);
  background-color: var(--wp--preset--color--primary-deep);
}
.skyc-section--tight {
  padding-top: var(--wp--custom--section-y-tight);
  padding-bottom: var(--wp--custom--section-y-tight);
}

/* --------------------------------------------------------------------------
   2. SECTION HEAD
   -------------------------------------------------------------------------- */
.skyc-head { max-width: 46rem; }
.skyc-head--center {
  max-width: 48rem;
  margin-inline: auto;
  text-align: center;
}
.skyc-head--center .skyc-eyebrow { justify-content: center; }

.skyc-head__title {
  margin: 0;
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--xxxl);
  font-weight: var(--wp--custom--weight-extrabold);
  line-height: var(--wp--custom--leading-tight);
  letter-spacing: var(--wp--custom--tracking-tight);
  color: var(--skyc-fg-strong);
  text-wrap: balance;
}
.skyc-head__text {
  margin: var(--wp--preset--spacing--16) 0 0;
  font-size: var(--wp--preset--font-size--lg);
  line-height: var(--wp--custom--leading-normal);
  color: var(--skyc-fg);
}
.skyc-head--invert .skyc-head__title { color: var(--wp--custom--heading-invert); }
.skyc-head--invert .skyc-head__text  { color: rgba(255, 255, 255, 0.84); }

/* The gap between a section head and whatever follows it. */
.skyc-head + * { margin-top: var(--wp--preset--spacing--48); }

/* --------------------------------------------------------------------------
   3. BODY COPY INSIDE SECTIONS
   -------------------------------------------------------------------------- */
.skyc-prose p {
  margin: 0 0 var(--wp--preset--spacing--16);
  font-size: var(--wp--preset--font-size--base);
  line-height: var(--wp--custom--leading-relaxed);
  color: var(--skyc-fg);
}
.skyc-prose p:last-child { margin-bottom: 0; }
.skyc-prose__lede {
  font-size: var(--wp--preset--font-size--lg);
  line-height: var(--wp--custom--leading-normal);
}
.skyc-prose a {
  color: var(--wp--preset--color--primary);
  text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   4. ACTIONS
   -------------------------------------------------------------------------- */
.skyc-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wp--preset--spacing--12);
  margin-top: var(--wp--preset--spacing--32);
}
.skyc-actions--center { justify-content: center; }

.skyc-arrow-link {
  display: inline-flex;
  align-items: center;
  gap: var(--wp--preset--spacing--8);
  font-weight: var(--wp--custom--weight-semibold);
  font-size: var(--wp--preset--font-size--base);
  color: var(--wp--preset--color--primary);
  text-decoration: none;
}
.skyc-arrow-link .skyc-icon {
  transition: transform var(--wp--custom--duration-base) var(--wp--custom--ease-out);
}
.skyc-arrow-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.skyc-arrow-link:hover .skyc-icon { transform: translateX(4px); }
.skyc-arrow-link--invert { color: var(--wp--preset--color--accent); }

/* --------------------------------------------------------------------------
   5. CHECK LISTS
   -------------------------------------------------------------------------- */
.skyc-check-list {
  display: grid;
  gap: var(--wp--preset--spacing--12);
  margin: var(--wp--preset--spacing--24) 0 0;
}
.skyc-check-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--wp--preset--spacing--12);
  font-size: var(--wp--preset--font-size--base);
  line-height: var(--wp--custom--leading-normal);
  color: var(--skyc-fg);
}
.skyc-check-list .skyc-icon {
  margin-top: 0.15em;
  color: var(--wp--preset--color--primary);
}
.skyc-check-list strong {
  display: block;
  font-weight: var(--wp--custom--weight-semibold);
  color: var(--skyc-fg-strong);
}
.skyc-check-list--gold .skyc-icon   { color: var(--wp--preset--color--accent-darker); }
.skyc-check-list--invert .skyc-icon { color: var(--wp--preset--color--accent); }

/* --------------------------------------------------------------------------
   6. PILLS
   -------------------------------------------------------------------------- */
.skyc-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--8);
  margin-top: var(--wp--preset--spacing--20);
}
.skyc-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--wp--preset--spacing--8);
  padding: var(--wp--preset--spacing--8) var(--wp--preset--spacing--16);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: var(--wp--custom--weight-semibold);
  line-height: 1.3;
  border-radius: var(--wp--custom--radius-pill);
  background-color: var(--wp--preset--color--surface-magenta);
  color: var(--wp--preset--color--primary-darker);
}
.skyc-pill--gold {
  background-color: var(--wp--preset--color--surface-gold);
  color: var(--wp--preset--color--accent-darker);
}
.skyc-pill--glass {
  background-color: rgba(255, 255, 255, 0.16);
  color: var(--wp--preset--color--base);
  backdrop-filter: blur(6px);
}
.skyc-pill--outline {
  background-color: transparent;
  border: 1px solid var(--wp--preset--color--line-strong);
  color: var(--wp--preset--color--muted);
}

/* --------------------------------------------------------------------------
   7. PANEL
   -------------------------------------------------------------------------- */
.skyc-panel {
  padding: var(--wp--preset--spacing--32);
  background-color: var(--skyc-card);
  border: 1px solid var(--skyc-line);
  border-radius: var(--wp--custom--radius-lg);
}
.skyc-panel--gold {
  background-color: var(--wp--preset--color--surface-gold);
  border-color: rgba(206, 131, 23, 0.30);
}
.skyc-panel--magenta {
  background-color: var(--wp--preset--color--surface-magenta);
  border-color: rgba(160, 24, 88, 0.20);
}
.skyc-panel__title {
  margin: 0;
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--xl);
  font-weight: var(--wp--custom--weight-bold);
  line-height: var(--wp--custom--leading-snug);
  color: var(--skyc-fg-strong);
}
.skyc-panel__text {
  margin: var(--wp--preset--spacing--12) 0 0;
  font-size: var(--wp--preset--font-size--base);
  line-height: var(--wp--custom--leading-relaxed);
  color: var(--skyc-fg);
}
.skyc-panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--12);
  margin-top: var(--wp--preset--spacing--20);
}

/* --------------------------------------------------------------------------
   8. QUOTE
   No names and no star ratings: the customers who sent these words supplied
   neither, so the card is built to look complete without them.
   -------------------------------------------------------------------------- */
.skyc-quote {
  display: grid;
  gap: var(--wp--preset--spacing--16);
  margin: 0;
  padding: var(--wp--preset--spacing--32);
  background-color: var(--wp--preset--color--base);
  border: 1px solid var(--wp--preset--color--line);
  border-radius: var(--wp--custom--radius-lg);
  box-shadow: var(--wp--preset--shadow--sm);
}
.skyc-quote__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--wp--custom--radius-circle);
  background-color: var(--wp--preset--color--surface-magenta);
  color: var(--wp--preset--color--primary);
}
.skyc-quote__mark .skyc-icon { width: 1.35em; height: 1.35em; }
.skyc-quote__text { margin: 0; padding: 0; border: 0; }
.skyc-quote__text p {
  margin: 0;
  font-size: var(--wp--preset--font-size--md);
  line-height: var(--wp--custom--leading-relaxed);
  color: var(--wp--preset--color--body);
}
.skyc-quote__foot {
  display: grid;
  gap: 2px;
  padding-top: var(--wp--preset--spacing--16);
  border-top: 1px solid var(--wp--preset--color--line);
}
.skyc-quote__name {
  font-weight: var(--wp--custom--weight-semibold);
  color: var(--wp--preset--color--contrast);
}
.skyc-quote__meta {
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--muted);
}
.skyc-quote--invert {
  background-color: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: none;
}
.skyc-quote--invert .skyc-quote__mark {
  background-color: rgba(232, 152, 40, 0.18);
  color: var(--wp--preset--color--accent);
}
.skyc-quote--invert .skyc-quote__text p { color: rgba(255, 255, 255, 0.88); }
.skyc-quote--invert .skyc-quote__foot   { border-top-color: rgba(255, 255, 255, 0.16); }
.skyc-quote--invert .skyc-quote__name   { color: var(--wp--custom--heading-invert); }
.skyc-quote--invert .skyc-quote__meta   { color: rgba(255, 255, 255, 0.62); }

/* --------------------------------------------------------------------------
   9. FRAMED PHOTO
   -------------------------------------------------------------------------- */
.skyc-framed {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--wp--custom--radius-lg);
  box-shadow: var(--wp--preset--shadow--lg);
}
.skyc-framed img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.skyc-framed figcaption {
  padding: var(--wp--preset--spacing--16) var(--wp--preset--spacing--20);
  font-size: var(--wp--preset--font-size--sm);
  line-height: var(--wp--custom--leading-snug);
  background-color: var(--wp--preset--color--base);
  color: var(--wp--preset--color--muted);
}
.skyc-framed--magenta figcaption {
  background-color: var(--wp--preset--color--surface-magenta);
  color: var(--wp--preset--color--primary-darker);
}
.skyc-framed--gold figcaption {
  background-color: var(--wp--preset--color--surface-gold);
  color: var(--wp--preset--color--accent-darker);
}

/* --------------------------------------------------------------------------
   10. COLLAGE
   One tall photo beside two short ones. Below 700px it becomes a single
   column so the short photos do not shrink into thumbnails.
   -------------------------------------------------------------------------- */
.skyc-collage {
  display: grid;
  gap: var(--wp--preset--spacing--16);
  grid-template-columns: 1fr;
}
.skyc-collage figure {
  margin: 0;
  overflow: hidden;
  border-radius: var(--wp--custom--radius-lg);
  box-shadow: var(--wp--preset--shadow--lg);
}
.skyc-collage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.skyc-collage__tall  { aspect-ratio: 3 / 4; }
.skyc-collage__short { aspect-ratio: 4 / 3; }

@media (min-width: 700px) {
  .skyc-collage {
    grid-template-columns: 1.15fr 0.85fr;
    grid-template-rows: 1fr 1fr;
  }
  .skyc-collage__tall {
    grid-row: 1 / 3;
    aspect-ratio: auto;
    min-height: 420px;
  }
  .skyc-collage__short { aspect-ratio: auto; min-height: 202px; }
  .skyc-collage--offset .skyc-collage__tall { transform: translateY(var(--wp--preset--spacing--24)); }
}

/* --------------------------------------------------------------------------
   11. FIGURE STACK
   Shared with the home hero: a main photo, an inset photo overlapping its
   lower-left corner, and a statistic badge on the upper right.
   -------------------------------------------------------------------------- */
.skyc-figure-stack {
  position: relative;
  padding-bottom: var(--wp--preset--spacing--48);
  padding-left: var(--wp--preset--spacing--48);
}
.skyc-figure-stack__main,
.skyc-figure-stack__inset {
  margin: 0;
  overflow: hidden;
  border: 5px solid var(--wp--preset--color--base);
  border-radius: var(--wp--custom--radius-lg);
  box-shadow: var(--wp--preset--shadow--xl);
}
.skyc-figure-stack__main { aspect-ratio: 4 / 3; }
.skyc-figure-stack__inset {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 46%;
  aspect-ratio: 1 / 1;
}
.skyc-figure-stack__main img,
.skyc-figure-stack__inset img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.skyc-figure-stack__badge {
  position: absolute;
  top: var(--wp--preset--spacing--24);
  right: calc(-1 * var(--wp--preset--spacing--16));
  display: grid;
  gap: var(--wp--preset--spacing--4);
  min-width: 140px;
  padding: var(--wp--preset--spacing--16) var(--wp--preset--spacing--20);
  text-align: right;
  background-color: var(--wp--preset--color--base);
  border-radius: var(--wp--custom--radius-md);
  box-shadow: var(--wp--preset--shadow--lg);
}
.skyc-stat__value {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--display);
  font-weight: var(--wp--custom--weight-extrabold);
  line-height: 1;
  letter-spacing: var(--wp--custom--tracking-tight);
  color: var(--wp--preset--color--primary);
}
.skyc-stat__label {
  font-size: var(--wp--preset--font-size--sm);
  font-weight: var(--wp--custom--weight-medium);
  color: var(--wp--preset--color--muted);
}

/* --------------------------------------------------------------------------
   12. SHARED GRIDS
   -------------------------------------------------------------------------- */
.skyc-grid {
  display: grid;
  gap: var(--wp--custom--grid-gap);
  grid-template-columns: 1fr;
}
@media (min-width: 620px) {
  .skyc-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .skyc-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .skyc-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .skyc-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* The two-column "copy beside media" layout most sections are built on. */
.skyc-split {
  display: grid;
  gap: var(--wp--preset--spacing--48);
  align-items: center;
}
@media (min-width: 1000px) {
  .skyc-split { grid-template-columns: 1fr 1fr; gap: var(--wp--preset--spacing--64); }
  .skyc-split--copy-wide  { grid-template-columns: 1.1fr 0.9fr; }
  .skyc-split--media-wide { grid-template-columns: 0.9fr 1.1fr; }
  .skyc-split--reverse .skyc-split__copy  { order: 2; }
  .skyc-split--reverse .skyc-split__media { order: 1; }
}
.skyc-split--top { align-items: start; }

/* --------------------------------------------------------------------------
   13. EDITOR
   The canvas is narrower than the front end at the same zoom, so the desktop
   layouts would never appear while the owner is editing them.
   -------------------------------------------------------------------------- */
.editor-styles-wrapper .skyc-section {
  padding-top: var(--wp--custom--section-y-tight);
  padding-bottom: var(--wp--custom--section-y-tight);
}
@media (min-width: 900px) {
  .editor-styles-wrapper .skyc-split { grid-template-columns: 1fr 1fr; }
  .editor-styles-wrapper .skyc-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .editor-styles-wrapper .skyc-grid--4 { grid-template-columns: repeat(4, 1fr); }
}