/* ==========================================================================
   Sky Ceylon — Card Sections

   Six grids. They all read their foreground and border colours from the
   --skyc-fg / --skyc-line / --skyc-card variables that .skyc-section sets, so
   every one of them works on the plum wash without a separate invert rule.

   FluentSnippets group: Card Sections | type: css | run_at: wp_head
   load_as_file: yes | load_in_block_editor: yes
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. INFO STRIP
   -------------------------------------------------------------------------- */
.skyc-info {
  display: grid;
  gap: var(--wp--preset--spacing--24);
}

.skyc-info__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--wp--preset--spacing--16);
  align-items: start;
}

.skyc-info__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--wp--custom--radius-md);
  background: var(--wp--preset--color--surface-magenta);
  color: var(--wp--preset--color--primary);
}
.skyc-info__icon--gold {
  background: var(--wp--preset--color--surface-gold);
  color: var(--wp--preset--color--accent-darker);
}

.skyc-info__title {
  margin: 0;
  font-weight: var(--wp--custom--weight-semibold);
  color: var(--skyc-fg-strong, var(--wp--preset--color--contrast));
}
.skyc-info__text {
  margin: var(--wp--preset--spacing--4) 0 0;
  font-size: var(--wp--preset--font-size--sm);
  color: var(--skyc-fg, var(--wp--preset--color--muted));
  line-height: var(--wp--custom--leading-normal);
}

@media (min-width: 620px) {
  .skyc-info { grid-template-columns: repeat(2, 1fr); gap: var(--wp--preset--spacing--32); }
}
@media (min-width: 1000px) {
  .skyc-info { grid-template-columns: repeat(4, 1fr); }
}

/* --------------------------------------------------------------------------
   2. OPTION CARDS
   -------------------------------------------------------------------------- */
.skyc-option {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--skyc-line, var(--wp--preset--color--line));
  border-radius: var(--wp--custom--radius-lg);
  background: var(--wp--preset--color--base);
  box-shadow: var(--wp--preset--shadow--sm);
}

.skyc-option__head {
  padding: var(--wp--preset--spacing--24);
  background: var(--wp--preset--color--surface-magenta);
  color: var(--wp--preset--color--primary-darker);
}
.skyc-option__head--gold {
  background: var(--wp--preset--color--surface-gold);
  color: var(--wp--preset--color--accent-darker);
}

.skyc-option__icon { display: block; margin-bottom: var(--wp--preset--spacing--12); }

.skyc-option__note {
  margin: 0 0 var(--wp--preset--spacing--4);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: var(--wp--custom--weight-semibold);
  letter-spacing: var(--wp--custom--tracking-wider);
  text-transform: uppercase;
}

.skyc-option__title {
  margin: 0;
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--lg);
  font-weight: var(--wp--custom--weight-bold);
  line-height: var(--wp--custom--leading-snug);
  color: inherit;
}

.skyc-option__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--wp--preset--spacing--16);
  padding: var(--wp--preset--spacing--24);
}
.skyc-option__text {
  margin: 0;
  color: var(--wp--preset--color--body);
  line-height: var(--wp--custom--leading-relaxed);
}

/* The button sits at the foot of every card, whatever the list length, so a
   row of cards lines up. */
.skyc-option__actions { margin-top: auto; }

/* --------------------------------------------------------------------------
   3. ICON CARDS
   -------------------------------------------------------------------------- */
.skyc-card {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--12);
  padding: var(--wp--preset--spacing--24);
  border: 1px solid var(--skyc-line, var(--wp--preset--color--line));
  border-radius: var(--wp--custom--radius-lg);
  background: var(--skyc-card, var(--wp--preset--color--base));
  transition: box-shadow var(--wp--custom--duration-base) var(--wp--custom--ease-out),
              transform var(--wp--custom--duration-base) var(--wp--custom--ease-out);
}
.skyc-card:hover {
  box-shadow: var(--wp--preset--shadow--md);
  transform: translateY(-2px);
}

.skyc-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--wp--custom--radius-md);
  background: var(--wp--preset--color--surface-magenta);
  color: var(--wp--preset--color--primary);
}
.skyc-card__icon--gold {
  background: var(--wp--preset--color--surface-gold);
  color: var(--wp--preset--color--accent-darker);
}
.skyc-section--plum .skyc-card__icon {
  background: rgba(255, 255, 255, 0.10);
  color: var(--wp--preset--color--accent);
}

.skyc-card__title {
  margin: 0;
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--md);
  font-weight: var(--wp--custom--weight-bold);
  line-height: var(--wp--custom--leading-snug);
  color: var(--skyc-fg-strong, var(--wp--preset--color--contrast));
}
.skyc-card__text {
  margin: 0;
  color: var(--skyc-fg, var(--wp--preset--color--body));
  line-height: var(--wp--custom--leading-relaxed);
  overflow-wrap: anywhere;
}
.skyc-card__link { margin: auto 0 0; padding-top: var(--wp--preset--spacing--4); }

/* --------------------------------------------------------------------------
   4. VALUE LIST
   -------------------------------------------------------------------------- */
.skyc-values {
  display: grid;
  gap: var(--wp--preset--spacing--24);
}
@media (min-width: 760px) {
  .skyc-values { grid-template-columns: repeat(2, 1fr); gap: var(--wp--preset--spacing--32); }
}

.skyc-value {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--wp--preset--spacing--16);
  align-items: start;
}
.skyc-value__icon {
  color: var(--wp--preset--color--primary);
  margin-top: 0.1em;
}
.skyc-section--plum .skyc-value__icon,
.skyc-section--magenta .skyc-value__icon { color: var(--wp--preset--color--accent); }

.skyc-value__title {
  margin: 0;
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--md);
  font-weight: var(--wp--custom--weight-bold);
  line-height: var(--wp--custom--leading-snug);
  color: var(--skyc-fg-strong, var(--wp--preset--color--contrast));
}
.skyc-value__text {
  margin: var(--wp--preset--spacing--8) 0 0;
  color: var(--skyc-fg, var(--wp--preset--color--body));
  line-height: var(--wp--custom--leading-relaxed);
}

/* --------------------------------------------------------------------------
   5. NUMBERS PANEL
   -------------------------------------------------------------------------- */
.skyc-trust > * + * { margin-top: var(--wp--preset--spacing--40); }

.skyc-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--wp--preset--spacing--24);
  padding: var(--wp--preset--spacing--32);
  border: 1px solid var(--skyc-line, var(--wp--preset--color--line));
  border-radius: var(--wp--custom--radius-lg);
  background: var(--skyc-card, var(--wp--preset--color--base));
  box-shadow: var(--wp--preset--shadow--sm);
}
@media (min-width: 900px) {
  .skyc-stats { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
}

.skyc-stat {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--4);
  text-align: center;
}
.skyc-section--plum .skyc-stat__value { color: var(--wp--preset--color--accent); }
.skyc-section--plum .skyc-stat__label { color: rgba(255, 255, 255, 0.72); }

.skyc-highlights {
  display: grid;
  gap: var(--wp--preset--spacing--24);
}
@media (min-width: 820px) {
  .skyc-highlights { grid-template-columns: repeat(3, 1fr); gap: var(--wp--preset--spacing--32); }
}

.skyc-highlight {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--wp--preset--spacing--16);
  align-items: start;
}
.skyc-highlight__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--wp--custom--radius-circle);
  background: var(--wp--preset--color--surface-gold);
  color: var(--wp--preset--color--accent-darker);
}
.skyc-highlight__title {
  margin: 0;
  font-weight: var(--wp--custom--weight-semibold);
  color: var(--skyc-fg-strong, var(--wp--preset--color--contrast));
}
.skyc-highlight__text {
  margin: var(--wp--preset--spacing--4) 0 0;
  font-size: var(--wp--preset--font-size--sm);
  color: var(--skyc-fg, var(--wp--preset--color--muted));
  line-height: var(--wp--custom--leading-normal);
}

/* --------------------------------------------------------------------------
   6. SERVICES MOSAIC

   One column on a phone. At 900px it becomes a two-column grid in which the
   large card holds the left side over two rows and the wide card runs along
   the bottom.
   -------------------------------------------------------------------------- */
.skyc-mosaic {
  display: grid;
  gap: var(--wp--custom--grid-gap);
}

.skyc-svc {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 19rem;
  padding: var(--wp--preset--spacing--24);
  overflow: hidden;
  border-radius: var(--wp--custom--radius-lg);
  background: var(--wp--preset--color--primary-deep);
  color: var(--wp--custom--text-invert);
  text-decoration: none;
  box-shadow: var(--wp--preset--shadow--md);
}

.skyc-svc__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.skyc-svc__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--wp--custom--duration-slow) var(--wp--custom--ease-out);
}
.skyc-svc::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(41, 6, 22, 0.88) 0%, rgba(41, 6, 22, 0.55) 45%, rgba(41, 6, 22, 0.15) 100%);
}
.skyc-svc:hover .skyc-svc__media img { transform: scale(1.04); }

.skyc-svc__body { display: block; }
.skyc-svc__tag { margin-bottom: var(--wp--preset--spacing--12); }

.skyc-svc__title {
  display: block;
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--xl);
  font-weight: var(--wp--custom--weight-extrabold);
  line-height: var(--wp--custom--leading-tight);
  color: var(--wp--custom--heading-invert);
}
.skyc-svc__text {
  display: block;
  margin-top: var(--wp--preset--spacing--8);
  max-width: 38rem;
  font-size: var(--wp--preset--font-size--sm);
  line-height: var(--wp--custom--leading-normal);
  color: rgba(255, 255, 255, 0.82);
}
.skyc-svc__more {
  display: inline-flex;
  align-items: center;
  gap: var(--wp--preset--spacing--8);
  margin-top: var(--wp--preset--spacing--16);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: var(--wp--custom--weight-semibold);
  color: var(--wp--preset--color--accent);
}
.skyc-svc__more .skyc-icon {
  transition: transform var(--wp--custom--duration-base) var(--wp--custom--ease-out);
}
.skyc-svc:hover .skyc-svc__more .skyc-icon { transform: translateX(4px); }

@media (min-width: 900px) {
  .skyc-mosaic {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: minmax(15rem, auto);
  }
  .skyc-svc--feature { grid-row: span 2; min-height: 34rem; }
  .skyc-svc--feature .skyc-svc__title { font-size: var(--wp--preset--font-size--xxl); }
  .skyc-svc--wide { grid-column: 1 / -1; min-height: 20rem; }
}

/* --------------------------------------------------------------------------
   7. EDITOR
   -------------------------------------------------------------------------- */
.editor-styles-wrapper .skyc-svc { min-height: 16rem; }
.editor-styles-wrapper .skyc-svc--feature { min-height: 24rem; }