/* ======================
   HERO
   ====================== */
.hero {
  background: none !important;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  background-image: url("../images/accommodation.webp"); /* <-- your new hero image */
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0;
  transform: translateZ(0) scale(1.08);
  will-change: opacity, transform;
}

.page-loaded .hero::before {
  animation: heroMovieIn 1600ms cubic-bezier(.22, 1, .25, 1) both;
}

@keyframes heroMovieIn {
  from { opacity: 0; transform: translateZ(0) scale(1.35); }
  to   { opacity: 1; transform: translateZ(0) scale(1.00); }
}

/* ======================
   INTRO ROW (matches screenshot)
   ====================== */
.accom-intro{
  max-width: 1180px;
  margin-inline: auto;
  padding: 3.2rem 1.25rem 2.4rem;
}

.accom-intro-row{
  display: grid;
  grid-template-columns: 360px 1fr; /* left title block + right paragraph */
  gap: 3.6rem;
  align-items: start;              /* paragraph starts at top like screenshot */
}

.accom-intro-title{
  margin: 0;
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.15;
  color: #3a3a3a;
}

.accom-intro-title__sun{ color:#f4a91c; }
.accom-intro-title__sea{ color:#189dd8; }

.accom-intro-underline{
  width: 120px;
  height: 3px;
  border-radius: 999px;
  background: #189dd8;
  margin-top: 0.9rem;
}

.accom-intro-copy{
  margin: 0;
  max-width: 820px;    /* keeps it like the screenshot, not too wide */
  font-size: 1rem;
  line-height: 1.65;
  color: #2f2f2f;
}

/* ======================
   GRID
   ====================== */
.accom-section {
  padding: 1rem 1rem 3rem;
}

.accom-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(260px, 330px));
  gap: 2.4rem;
  justify-content: center;
  max-width: 1180px;
  margin-inline: auto;
}

.accom-grid--tail{
  margin-top: 2rem;          /* more space (was 2.4rem) */
  padding-top: 0.6rem;         /* extra breathing room so it never “touches” */
  transform: translateX(-175px);/* nudge left (tweak -24px / -40px) */
}

/* force exact columns */
.accom-grid--tail .accom-card--col2{ grid-column: 2; }
.accom-grid--tail .accom-card--col3{ grid-column: 3; }


/* ======================
   CARD (improved)
   ====================== */
.accom-card{
  position: relative;
  border-radius: 26px;
  overflow: hidden;
  background: #fff;
  min-height: 380px;
  cursor: auto;

  /* clean soft depth */
  box-shadow:
    0 10px 26px rgba(0,0,0,.10),
    0 30px 80px rgba(0,0,0,.06);

  outline: 1px solid rgba(0,0,0,.04);

  /* smooth but not “floaty” */
  transition:
    box-shadow 380ms cubic-bezier(.2,.9,.2,1),
    filter 380ms cubic-bezier(.2,.9,.2,1);
  will-change: box-shadow;
}

/* subtle glossy highlight layer */
.accom-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
  background:
    radial-gradient(900px 260px at 10% 0%, rgba(255,255,255,.55), transparent 55%),
    radial-gradient(900px 260px at 90% 0%, rgba(255,255,255,.28), transparent 60%);
  transition: opacity 700ms cubic-bezier(.16,1,.3,1);
  z-index: 2;
}

/* image zoom + slight darken for readability */
.accom-card__media{
  height: 260px;
  background-size: cover;
  background-position: center;
  transform: scale(1);
  filter: saturate(1.02) contrast(1.02);
  transition:
    transform 900ms cubic-bezier(.16,1,.3,1),
    filter 900ms cubic-bezier(.16,1,.3,1);
}

/* FRONT */
.accom-card__front{
  position: relative;
  z-index: 3;

  /* make the bottom stripe position consistent */
  height: 120px;

  /* move title DOWN more */
  padding: 2.35rem 1.25rem 1.25rem;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.accom-card__front h3{
  margin: 0;
  font-size: 1.08rem;
  font-weight: 650;
  color: #111;
  letter-spacing: .1px;
}

/* BLUE STRIPE: lock it to the bottom-left ALWAYS */
.accom-card__front h3::after{
  content:"";
  position: absolute;
  left: 1.25rem;
  bottom: 1.25rem;

  width: 72px;
  height: 3px;
  border-radius: 999px;

  background: #189dd8;
  opacity: .95;

  transition: background 450ms cubic-bezier(.16,1,.3,1),
              opacity 450ms cubic-bezier(.16,1,.3,1);
}

/* BACK (hover info) */
.accom-card__back{
  position: absolute;
  inset: 0;
  z-index: 4;

  background: #e69a21;
  color: #fff;

  /* 👇 push content UP */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;

  /* tighter top padding */
  padding: 1.4rem 1.6rem 3.2rem;

  opacity: 0;
  transition: opacity 520ms cubic-bezier(.16,1,.3,1);
}

/* highlight layer BEHIND text + stripe */
.accom-card__back::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: radial-gradient(900px 420px at 20% 10%, rgba(255,255,255,.14), transparent 60%);
  opacity: .9;
  z-index: 0; /* 👈 important */
}

/* WHITE STRIPE: same bottom-left position as front */
.accom-card__back::after{
  content:"";
  position:absolute;
  left: 1.25rem;
  bottom: 1.25rem;

  width: 72px;
  height: 3px;
  border-radius: 999px;
  background: rgba(255,255,255,.95);

  opacity: 0;
  transition: opacity 520ms cubic-bezier(.16,1,.3,1);
  z-index: 2; /* 👈 above highlight */
}

/* make back text sit above highlight */
.accom-card__back h3,
.accom-card__back p{
  position: relative;
  z-index: 1;
}

/* text */
.accom-card__back h3{
  margin: 0 0 .55rem;
  font-size: 1.2rem;
  font-weight: 750;
  letter-spacing: .15px;
  line-height: 1.15;
}

.accom-card__back p{
  margin: 0;
  font-size: .98rem;
  line-height: 1.55;
  opacity: .95;
}

@media (hover:hover){
  .accom-card{
    transition:
      transform 520ms cubic-bezier(.16,1,.3,1),
      box-shadow 520ms cubic-bezier(.16,1,.3,1);
    will-change: transform;
  }

  .accom-card:hover{
    /* very subtle scale — feels “alive” not jumpy */
    transform: scale(1.018);

    box-shadow:
      0 20px 46px rgba(0,0,0,.14),
      0 60px 160px rgba(0,0,0,.18);
  }

  .accom-card:hover .accom-card__back{
    opacity: 1;
  }

  .accom-card:hover .accom-card__back::after{
    opacity: 1;
  }

  /* front blue stripe becomes white on hover */
  .accom-card:hover .accom-card__front h3::after{
    background: rgba(255,255,255,.95);
    opacity: 1;
  }
}


/* ======================
   CARD IMAGE BACKGROUNDS
   ====================== */
.accom-bg--hotel-sky { background-image: url("../images/hotel_sky.jpg"); }
.accom-bg--newmark   { background-image: url("../images/newmark.jpg"); }
.accom-bg--dream     { background-image: url("../images/dream_hotels.jpg"); }
.accom-bg--royal     { background-image: url("../images/royal_boutique.jpg"); }
.accom-bg--tulbagh   { background-image: url("../images/tulbagh.jpg"); }
.accom-bg--ammazulu  { background-image: url("../images/ammazulu.jpg"); }
.accom-bg--thali     { background-image: url("../images/thali_thali.jpg"); }
.accom-bg--mattanu   { background-image: url("../images/mattanu.jpg"); }
.accom-bg--mdluli    { background-image: url("../images/mdluli.jpg"); }
.accom-bg--msc       { background-image: url("../images/msc.webp"); }
.accom-bg--forest    { background-image: url("../images/forest.webp"); }

/* media base */
.accom-card__media {
  height: 260px;
  background-size: cover;
  background-position: center;
}

/* ======================
   SCROLL REVEAL (stronger)
   ====================== */
html.reveal-boot .reveal{
  opacity: 0;
  transform: translate3d(0,46px,0) scale(.975);
  filter: blur(6px);
  transition: none;
  will-change: transform, opacity, filter;
}

html.reveal-boot .reveal.is-visible{
  opacity: 1;
  transform: translate3d(0,0,0) scale(1);
  filter: blur(0);
  transition:
    opacity 900ms cubic-bezier(.18,1,.25,1),
    transform 900ms cubic-bezier(.18,1,.25,1),
    filter 900ms cubic-bezier(.18,1,.25,1);
}

/* small stagger using CSS variable */
html.reveal-boot .reveal.is-visible{
  transition-delay: var(--reveal-delay, 0ms);
}

/* =========================================================
   MOBILE PORTRAIT — ACCOMMODATION
   ========================================================= */
@media (max-width: 430px) and (orientation: portrait) {

  /* ---------------------------------
     1) Global safety
     --------------------------------- */
  html, body{
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
  }

  /* ---------------------------------
     2) HERO: avoid 100vh traps + mobile zoom
     --------------------------------- */
  .hero{
    position: relative !important;
    overflow: hidden !important;
    background: #000 !important;

    /* give it a mobile hero feel */
    min-height: 56svh !important;
  }

  /* hide any hero copy that home.html might inject */
  .hero-copy{
    display: none !important;
  }

  /* mobile hero image for this page */
  .hero::before{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    z-index: 5 !important;

    /* ✅ your accommodation hero image */
    background-image: url("../images/accommodation.webp") !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;

    /* tweak this to taste */
    background-position: 38% 30% !important;

    opacity: 1 !important;

    transform: translate3d(0,0,0) scale(1.0);
    will-change: transform !important;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform-origin: center center;

    /* kill desktop animation */
    animation: none !important;
  }

  /* run the same clean mobile zoom */
  body.page-loaded .hero::before{
    animation: accomHeroMobileZoomOnly 1400ms cubic-bezier(.22,1,.25,1) both !important;
  }

  @keyframes accomHeroMobileZoomOnly{
    from { transform: translate3d(0,0,0) scale(1.7); }
    to   { transform: translate3d(0,0,0) scale(1.00); }
  }

  /* ---------------------------------
     3) INTRO: stack + tighten spacing
     --------------------------------- */
  .accom-intro{
    padding: 0.5rem 0.95rem 1.25rem !important;
  }

  .accom-intro-row{
    grid-template-columns: 1fr !important;
    gap: 0.9rem !important;
  }

  .accom-intro-title{
    font-size: clamp(1.35rem, 6.2vw, 1.7rem) !important;
    line-height: 1.18 !important;
  }

  .accom-intro-underline{
    width: 88px !important;
    margin-top: 0.65rem !important;
  }

  .accom-intro-copy{
    font-size: 0.98rem !important;
    line-height: 1.6 !important;
    max-width: none !important;
  }

  /* ---------------------------------
     4) GRIDS: single column + remove tail nudge
     --------------------------------- */
  .accom-section{
    padding: 0.75rem 0.95rem 2.4rem !important;
  }

  .accom-grid{
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
    justify-content: stretch !important;
    max-width: 520px !important;
    margin-inline: auto !important;
  }

  .accom-grid--tail{
    margin-top: 1.25rem !important;
    padding-top: 0 !important;
    transform: none !important; /* ✅ kill desktop translateX */
  }

  /* tail “forced columns” must not apply on mobile */
  .accom-grid--tail .accom-card--col2,
  .accom-grid--tail .accom-card--col3{
    grid-column: auto !important;
  }

  /* ---------------------------------
     5) CARDS: shorter + more phone-like
     --------------------------------- */
  .accom-card{
    border-radius: 20px !important;
    min-height: 0 !important; /* let content define height */
  }

  .accom-card__media{
    height: 210px !important;
  }

  .accom-card__front{
    height: auto !important;
    padding: 1.15rem 1.1rem 1.25rem !important;
  }

  .accom-card__front h3{
    font-size: 1.02rem !important;
  }

  .accom-card__front h3::after{
    left: 1.1rem !important;
    bottom: 1.05rem !important;
    width: 64px !important;
  }

  .accom-card__back{
    padding: 1.15rem 1.15rem 2.7rem !important;
  }

  .accom-card__back h3{
    font-size: 1.08rem !important;
    margin-bottom: .45rem !important;
  }

  .accom-card__back p{
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
  }

  .accom-card__back::after{
    left: 1.1rem !important;
    bottom: 1.05rem !important;
    width: 64px !important;
  }

 /* ---------------------------------
    6) Touch devices: REAL flip (front -> back)
  --------------------------------- */
  @media (hover: none){

    /* ---------------------------------
      TAP HINT (on image, top-right)
    --------------------------------- */

    /* anchor */
    .accom-card__media{
      position: relative;
    }

    .accom-card__media::after{
      content: "Tap to read more";
      position: absolute;
      top: .65rem;
      right: .65rem;
      z-index: 6;

      font-size: 0.58rem;                 /* smaller */
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;

      color: rgba(15,23,42,.75);          /* more visible text */
      background: rgba(255,255,255,.96);  /* cleaner white */
      border: 1px solid rgba(15,23,42,.14);/* slightly stronger edge */

      padding: .18rem .38rem;             /* tighter pill */
      border-radius: 999px;

      pointer-events: none;
      white-space: nowrap;

      opacity: .95;
      transform: translate3d(0,0,0);
      transition: opacity 220ms ease, transform 220ms ease;
    }

    /* tiny pulse */
    .accom-card__media::after{
      animation: tapHintPulse 2200ms ease-in-out infinite;
    }

    @keyframes tapHintPulse{
      0%,100%{ transform: translate3d(0,0,0); opacity: .78; }
      50%{ transform: translate3d(0,-2px,0); opacity: 1; }
    }

    /* hide hint when open */
    .accom-card.is-open .accom-card__media::after{
      opacity: 0;
      animation: none;
    }

    .accom-card{
      position: relative !important;
      cursor: pointer !important;
      -webkit-tap-highlight-color: transparent;

      perspective: 1200px;
      transform-style: preserve-3d;

      /* ✅ smooth container feel */
      transition: box-shadow 260ms ease, transform 260ms ease;
      will-change: height, transform;
    }

    .accom-card{
      overflow: hidden !important;
    }
    .accom-card__back{
      border-radius: inherit;
    }

    .accom-card__back{ transform-origin: center center; }

    /* faces */
    .accom-card__front,
    .accom-card__back{
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      transform-style: preserve-3d;
      will-change: transform, opacity;
    }

    /* FRONT */
    .accom-card__front{
      position: relative;
      z-index: 2;
      transform: rotateY(0deg);
      transition:
        transform 620ms cubic-bezier(.2,.9,.2,1),
        opacity 260ms ease;
    }

    /* ✅ IMAGE: don’t display:none (causes snap). Fade it out smoothly. */
    .accom-card__media{
      transition:
        opacity 240ms ease,
        transform 620ms cubic-bezier(.2,.9,.2,1);
      transform-origin: center center;
      will-change: opacity, transform;
    }

    /* BACK */
    .accom-card__back{
      position: absolute !important;
      inset: 0 !important;
      z-index: 3;

      opacity: 0;
      transform: rotateY(-180deg);
      transition:
        transform 620ms cubic-bezier(.2,.9,.2,1),
        opacity 260ms ease;

      padding: 1.15rem 1.15rem 2.7rem !important;
    }

    /* OPEN: flip */
    .accom-card.is-open .accom-card__front{
      transform: rotateY(180deg);
      opacity: 0;
      pointer-events: none;
    }

    .accom-card.is-open .accom-card__back{
      opacity: 1;
      transform: rotateY(0deg);
    }

    /* ✅ hide image smoothly (no layout jump) */
    .accom-card.is-open .accom-card__media{
      opacity: 0 !important;
      transform: scale(1.02);
      pointer-events: none;
    }

    /* subtle “pressed open” feel */
    .accom-card.is-open{
      transform: translate3d(0,-2px,0);
    }

    /* selection */
    .accom-card *{
      -webkit-user-select: none;
      user-select: none;
    }
    .accom-card.is-open .accom-card__back p,
    .accom-card.is-open .accom-card__back h3{
      -webkit-user-select: text;
      user-select: text;
    }
  }

  /* ---------------------------------
     7) Reveal: reduce heavy blur on phones (looks cleaner)
     --------------------------------- */
  html.reveal-boot .reveal{
    filter: none !important;
    transform: translate3d(0,24px,0) scale(.985) !important;
  }
}