/* ============================================================
   Tourism page — styles.
   Linked AFTER main.css + responsive.css so these win by order.
   Scope: Tourism.html only. Do not edit main/responsive here.
   ============================================================ */

/* Shared hairline + matboard shadow tokens */
:root {
  --ust-hairline: oklch(87% 0.022 62deg);
  --ust-frame-shadow:
    drop-shadow(0 0 .5px oklch(31% .09 32 / .34))
    drop-shadow(0 2px 3px oklch(31% .09 32 / .2))
    drop-shadow(0 10px 18px oklch(31% .09 32 / .12));
}

/* ------------------------------------------------------------
   1. Categories header — eyebrow + heading + description stacked
      on the left, with a full-width hairline underneath.
   ------------------------------------------------------------ */
.tourism-categories .title-container.tourism-cats-head {
  display: block;
  grid-template-columns: none;
  gap: 0;
  align-items: stretch;
  margin-bottom: clamp(36px, 4vw, 52px);
  padding-bottom: 26px;
  border-bottom: 1px solid var(--ust-hairline);
}
.tourism-cats-head .col {
  max-width: 640px;
}
.tourism-cats-head .desc {
  max-width: 58ch;
  margin-top: 0;
}

/* ------------------------------------------------------------
   2. Category panels — intro on the LEFT, an image collage on the
      RIGHT (one tall photo + two stacked photos), matching the
      reference instead of three equal photos in a row.
   ------------------------------------------------------------ */
.category-panel-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(30px, 5vw, 70px);
  align-items: start;
}
.tourism-categories .category-panel-intro {
  max-width: 44ch;
  margin-bottom: 0;
}

.category-photos {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(18px, 2vw, 30px);
  align-items: stretch;
  min-width: 0;
}
.category-photos-stack {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: clamp(18px, 2vw, 30px);
  min-width: 0;
}

/* soft matboard shadow follows the scalloped frame (mask sits on the child) */
.cat-frame {
  min-width: 0;
  filter: var(--ust-frame-shadow);
}

/* frames fill their grid cell; the tall one drives the collage height */
.category-photos .destination-photo {
  height: 100%;
  padding: 14px;
}
.category-photos .destination-photo .destination-photo-inner {
  height: 100%;
}
.category-photos .cat-frame-lg .destination-photo-inner {
  min-height: clamp(340px, 40vw, 520px);
}
.category-photos-stack .destination-photo-inner {
  min-height: 156px;
}

/* thin inset ring inside every framed photo */
.tourism-categories .destination-photo-inner {
  box-shadow: inset 0 0 0 1px oklch(31% 0.09 32deg / 0.1);
}

/* the "Enquire about this" arrow inherits the shared CTA arrow motion */
.category-panel-intro .btn .btn-arrow {
  display: inline-flex;
}

/* ------------------------------------------------------------
   2b. Category panels — responsive
   ------------------------------------------------------------ */
@media only screen and (max-width: 1024px) {
  .category-panel-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .tourism-categories .category-panel-intro {
    max-width: 60ch;
  }
}
@media only screen and (max-width: 620px) {
  .category-photos {
    grid-template-columns: 1fr;
  }
  .category-photos-stack {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: none;
  }
  .category-photos .cat-frame-lg .destination-photo-inner {
    min-height: 240px;
  }
  .category-photos-stack .destination-photo-inner {
    min-height: 128px;
  }
}

/* ------------------------------------------------------------
   3. Discover Kerala — postage-stamp cards.
      The reference gives the whole WHITE CARD the perforated edge
      (not the photo). Move the scallop to an inner wrapper and put
      the lift + soft shadow on the outer card, so a mask never
      clips the shadow.
   ------------------------------------------------------------ */
.kerala-tourism .destination-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  height: 100%;
  filter: var(--ust-frame-shadow);
  transition: transform 0.26s ease-out, filter 0.26s ease-out;
}
.kerala-tourism .destination-card:hover {
  transform: scale(1.03);
  box-shadow: none;
  filter:
    drop-shadow(0 0 .6px oklch(31% .09 32 / .4))
    drop-shadow(0 8px 14px oklch(31% .09 32 / .26))
    drop-shadow(0 22px 40px oklch(31% .09 32 / .2));
}
.kerala-tourism .destination-card-inner {
  height: 100%;
  background: #ffffff;
  padding: 16px 16px 0;
  -webkit-mask:
    radial-gradient(7.5px at 50% 0, #0000 97%, #000) 50% 0 / 26px 100% repeat-x,
    radial-gradient(7.5px at 50% 100%, #0000 97%, #000) 50% 100% / 26px 100% repeat-x,
    radial-gradient(7.5px at 0 50%, #0000 97%, #000) 0 50% / 100% 26px repeat-y,
    radial-gradient(7.5px at 100% 50%, #0000 97%, #000) 100% 50% / 100% 26px repeat-y;
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(7.5px at 50% 0, #0000 97%, #000) 50% 0 / 26px 100% repeat-x,
    radial-gradient(7.5px at 50% 100%, #0000 97%, #000) 50% 100% / 26px 100% repeat-x,
    radial-gradient(7.5px at 0 50%, #0000 97%, #000) 0 50% / 100% 26px repeat-y,
    radial-gradient(7.5px at 100% 50%, #0000 97%, #000) 100% 50% / 100% 26px repeat-y;
  mask-composite: intersect;
}

/* photo inside a stamp card: flush, plain, thin inset ring (no double scallop) */
.kerala-tourism .destination-card .destination-photo {
  background: transparent;
  padding: 0;
  -webkit-mask: none;
  mask: none;
}
.kerala-tourism .destination-card .destination-photo-inner {
  height: 300px;
  box-shadow: inset 0 0 0 1px oklch(31% 0.09 32deg / 0.12);
}
.kerala-tourism .destination-card .destination-body {
  padding: 22px 6px 26px;
}

/* ------------------------------------------------------------
   4. Discover Kerala — stop the carousel cropping the lifted card.
      The embla viewport is overflow:hidden, which clips the hover
      scale + drop-shadow. Give it breathing room and pull the box
      back with matching negative margins.
   ------------------------------------------------------------ */
.kerala-tourism .embla {
  padding: 28px 8px 62px;
  margin: -22px -8px -34px;
}

/* Mobile — dark destination carousel cards: wider and shorter. */
@media only screen and (max-width: 600px) {
  .kerala-tourism .destination-card .destination-photo-inner {
    height: 185px;
  }
}