/* ==========================================================================
   Properties page styles
   Loaded AFTER main.css + responsive.css. Scoped to this page's sections so
   it never affects shared components on other pages.
   ========================================================================== */

/* --- "Where to stay" section header -------------------------------------
   Eyebrow, heading and description in a single left-aligned column, with a
   hairline rule closing the block. */
.property-categories .title-container.properties-heading {
  display: block;
  margin-bottom: clamp(40px, 4vw, 52px);
  padding-bottom: 26px;
  border-bottom: 1px solid oklch(87% 0.022 62deg);
}
.property-categories .title-container.properties-heading .col {
  max-width: 640px;
  text-align: left;
  align-items: flex-start;
}
.property-categories .title-container.properties-heading .desc {
  max-width: 58ch;
}

/* --- Stay categories ------------------------------------------------------
   Each category is one generic block laid out like Tourism's "Eight ways to
   travel with us": intro on the left, a framed photo collage on the right
   (one tall photo + two stacked). */
.property-categories .category-panel-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(30px, 5vw, 70px);
  align-items: start;
}
.property-categories .category-panel-intro {
  max-width: 44ch;
  margin-bottom: 0;
}
.property-categories .category-panel-intro .btn .btn-arrow { display: inline-flex; }
.property-categories .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;
}
.property-categories .category-photos-stack {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: clamp(18px, 2vw, 30px);
  min-width: 0;
}
.property-categories .cat-frame {
  min-width: 0;
  filter: 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));
}
.property-categories .category-photos .destination-photo { height: 100%; padding: 14px; }
.property-categories .category-photos .destination-photo-inner {
  height: 100%;
  box-shadow: inset 0 0 0 1px oklch(31% 0.09 32deg / 0.1);
}
.property-categories .category-photos .cat-frame-lg .destination-photo-inner { min-height: clamp(340px, 40vw, 520px); }
.property-categories .category-photos-stack .destination-photo-inner { min-height: 156px; }

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