/* ==========================================================================
   Sky Ceylon — Home Hero

   Full-bleed photo under a plum wash, copy on the left, an overlapping photo
   stack on the right from 1000px up.

   FluentSnippets group: Home Hero | type: css | run_at: wp_head
   load_as_file: yes | load_in_block_editor: yes
   ========================================================================== */

.skyc-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--wp--preset--color--primary-deep);
  color: var(--wp--custom--text-invert);
  padding-top: var(--wp--custom--section-y);
  padding-bottom: calc(var(--wp--custom--section-y) + var(--wp--preset--spacing--64));
}

/* --- background photo + wash --- */
.skyc-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.skyc-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
}
.skyc-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--wp--custom--overlay-plum);
}

/* A soft gold bloom in the top-right corner, echoing the accent colour. */
.skyc-hero__glow {
  position: absolute;
  z-index: -1;
  top: -160px;
  right: -140px;
  width: 520px;
  height: 520px;
  border-radius: var(--wp--custom--radius-circle);
  background: radial-gradient(circle, rgba(232, 152, 40, 0.30) 0%, rgba(232, 152, 40, 0) 68%);
  pointer-events: none;
}

/* --- layout --- */
.skyc-hero__inner {
  display: grid;
  gap: var(--wp--preset--spacing--48);
  align-items: center;
}
@media (min-width: 1000px) {
  .skyc-hero__inner {
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--wp--preset--spacing--64);
  }
}

/* --- copy --- */
.skyc-hero__copy { max-width: 36rem; }

.skyc-hero__title {
  margin: 0;
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--mega);
  font-weight: var(--wp--custom--weight-extrabold);
  line-height: 1.12;
  letter-spacing: var(--wp--custom--tracking-tight);
  color: var(--wp--custom--heading-invert);
}
.skyc-hero__title em {
  font-style: normal;
  color: var(--wp--preset--color--accent);
}

.skyc-hero__text {
  margin: var(--wp--preset--spacing--24) 0 0;
  max-width: 34rem;
  font-size: var(--wp--preset--font-size--xl);
  line-height: var(--wp--custom--leading-normal);
  letter-spacing: var(--wp--custom--tracking-snug);
  color: rgba(255, 255, 255, 0.86);
}

.skyc-hero__actions {
  margin-top: var(--wp--preset--spacing--32);
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--12);
}

.skyc-hero__assure {
  margin-top: var(--wp--preset--spacing--24);
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--8) var(--wp--preset--spacing--24);
  font-size: var(--wp--preset--font-size--base);
  color: rgba(255, 255, 255, 0.78);
}
.skyc-hero__assure li {
  display: inline-flex;
  align-items: center;
  gap: var(--wp--preset--spacing--8);
}
.skyc-hero__assure .skyc-icon {
  color: var(--wp--preset--color--accent);
  stroke-width: 2.2;
}

/* --------------------------------------------------------------------------
   OVERLAPPING PHOTO STACK
   Decoration, not information — the copy above carries the message, so the
   whole stack is dropped below 1000px rather than stacked under the text.

   The stack itself (.skyc-figure-stack) lives in Shared Components — the
   About and Tours pages reuse it.
   -------------------------------------------------------------------------- */
.skyc-hero__media {
  position: relative;
  display: none;
}
@media (min-width: 1000px) {
  .skyc-hero__media { display: block; }
}

/* --------------------------------------------------------------------------
   EDITOR
   The canvas is narrower than the front end at the same zoom, so the photo
   stack would vanish while the owner is editing it. Show it from 900px of
   canvas instead.
   -------------------------------------------------------------------------- */
.editor-styles-wrapper .skyc-hero { padding-top: var(--wp--custom--section-y-tight); }
@media (min-width: 900px) {
  .editor-styles-wrapper .skyc-hero__media { display: block; }
}