/* PG STAy — public marketing site. Mobile-first. */

.pgs-header {
  position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid var(--pg-border);
}
.pgs-header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--pg-space-3); padding: 14px 0; }
.pgs-brand { display: flex; align-items: center; gap: 10px; }
.pgs-brand-mark { width: 40px; height: 40px; border-radius: var(--pg-radius-sm); background: var(--pg-primary-gradient); display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; }
.pgs-brand-mark svg { width: 21px; height: 21px; stroke: #fff; }
.pgs-brand-mark:has(.pgs-brand-logo) { background: var(--pg-card); border: 1px solid var(--pg-border); }
.pgs-brand-logo { width: 100%; height: 100%; object-fit: cover; }
.pgs-brand-text strong { display: block; font-size: 1rem; }
.pgs-footer-brand { margin-bottom: 12px; }
.pgs-footer-brand strong { color: #fff; }
.pgs-brand-text span { display: block; font-size: 0.68rem; color: var(--pg-text-faint); }
.pgs-nav { display: none; align-items: center; gap: var(--pg-space-5); }
.pgs-nav a { font-size: 0.88rem; font-weight: 600; color: var(--pg-text-muted); }
.pgs-nav a.is-active { color: var(--pg-primary); }
.pgs-header-actions { display: flex; align-items: center; gap: var(--pg-space-3); }
.pgs-phone { display: none; font-size: 0.84rem; font-weight: 600; color: var(--pg-text-muted); }
.pgs-menu-toggle { border: none; background: transparent; padding: 6px; }
.pgs-menu-toggle svg { width: 24px; height: 24px; }

.pgs-mobile-nav { display: none; flex-direction: column; gap: 2px; padding: var(--pg-space-3) 0 var(--pg-space-4); border-top: 1px solid var(--pg-border); }
.pgs-mobile-nav.is-open { display: flex; }
.pgs-mobile-nav a { padding: 10px 4px; font-weight: 600; font-size: 0.9rem; }
.pgs-mobile-nav a.is-active { color: var(--pg-primary); }

.pgs-hero { background: linear-gradient(180deg, #F2EFFC 0%, #FAF8FD 100%); padding: var(--pg-space-8) 0; }
.pgs-hero-grid { display: grid; grid-template-columns: 1fr; gap: var(--pg-space-6); align-items: center; }
.pgs-pill { display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1px solid var(--pg-border); border-radius: var(--pg-radius-full); padding: 6px 14px; font-size: 0.78rem; font-weight: 700; color: var(--pg-primary); }
.pgs-hero h1 { font-size: 1.9rem; line-height: 1.15; margin: var(--pg-space-3) 0 var(--pg-space-3); }
.pgs-hero h1 .pgs-accent { color: var(--pg-primary); }
.pgs-hero p { color: var(--pg-text-muted); font-size: 0.95rem; margin-bottom: var(--pg-space-4); }
.pgs-hero-checks { display: flex; flex-direction: column; gap: 8px; margin-bottom: var(--pg-space-4); }
.pgs-hero-checks li { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; font-weight: 600; }
.pgs-hero-checks svg { width: 18px; height: 18px; color: var(--pg-success); flex-shrink: 0; }
.pgs-hero-img { border-radius: var(--pg-radius-lg); overflow: hidden; box-shadow: var(--pg-shadow); }
.pgs-hero-img img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Search card sits as its own column beside the hero image (see .pgs-hero-grid's 3-col rule
   below at 1024px) rather than overlapping the section beneath it, so it always stays a plain
   1-column stack of fields — no separate wide/narrow variant needed. */
.pgs-search-card {
  background: #fff; border-radius: var(--pg-radius-md); box-shadow: var(--pg-shadow); padding: var(--pg-space-4);
  display: grid; grid-template-columns: 1fr; gap: var(--pg-space-3); position: relative; z-index: 5;
}
.pgs-search-card h3 { font-size: 1rem; }
.pgs-search-card > p { color: var(--pg-text-muted); font-size: 0.8rem; margin-top: -8px; margin-bottom: 4px; }
.pgs-search-card .pg-field { margin-bottom: 0; }

.pgs-section { padding: var(--pg-space-8) 0; }
/* The title and its action (button/select) always share one row, even on narrow phones — if
   they don't both fit, the title text wraps onto a second line instead of the whole action
   dropping below it, which is what flex-wrap:wrap did. min-width:0 lets the title's flex item
   shrink below its text's natural width so it can actually wrap instead of forcing the row wider. */
.pgs-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--pg-space-3); margin-bottom: var(--pg-space-5); flex-wrap: nowrap; }
.pgs-section-head > *:first-child { min-width: 0; }
.pgs-section-head > *:last-child { flex-shrink: 0; }
.pgs-section-head h2 { font-size: 1.4rem; }
.pgs-section-head p { color: var(--pg-text-muted); font-size: 0.88rem; margin-top: 4px; }

.pgs-trust-strip {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--pg-space-4);
  background: #fff; border-radius: var(--pg-radius-lg); box-shadow: var(--pg-shadow); padding: var(--pg-space-5);
  /* Pulls up just enough to sit inside the hero's own bottom padding (32px) for a visible
     overlap, while staying clear of the hero grid's tallest column (the search card) — going
     further starts covering its fields instead of just the empty background behind them. */
  margin-top: calc(-1 * var(--pg-space-8) - var(--pg-space-4));
}
/* Grid items default to min-width:auto, so a long unbreakable phrase like "Verified
   Accommodations" can force this item — and the trust-strip card — wider than the 2-col grid
   track actually has room for at very narrow phone widths. min-width:0 lets it wrap instead. */
.pgs-trust-item { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pgs-trust-item > div { min-width: 0; }
.pgs-icon-chip { width: 46px; height: 46px; border-radius: 50%; background: var(--pg-primary-50); color: var(--pg-primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pgs-icon-chip.is-info { background: var(--pg-info-bg); color: var(--pg-info); }
.pgs-icon-chip.is-success { background: var(--pg-success-bg); color: var(--pg-success); }
.pgs-icon-chip.is-warning { background: var(--pg-warning-bg); color: var(--pg-warning); }
.pgs-icon-chip svg { width: 22px; height: 22px; }
.pgs-trust-item strong { display: block; font-size: 0.86rem; overflow-wrap: break-word; }
.pgs-trust-item p { font-size: 0.8rem; color: var(--pg-text-muted); margin-top: 2px; }

.pgs-grid { display: grid; grid-template-columns: 1fr; gap: var(--pg-space-5); }
/* Grid items default to min-width:auto, so a child with its own horizontal scroller (the
   property row below) would otherwise force this track — and the page — wider instead of
   scrolling internally. */
.pgs-grid.cols-2-wide > div { min-width: 0; }

/* Property accommodation cards scroll horizontally at every width — with a variable number of
   properties this stays usable without a JS carousel, and matches naturally on touch devices.
   The floating arrow button (only rendered once there's enough cards to need it) is a mouse/
   trackpad affordance on top of that native scroll, not a replacement for it. */
.pgs-property-row-wrap { position: relative; }
.pgs-property-row { display: flex; gap: var(--pg-space-5); overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: var(--pg-space-2); -webkit-overflow-scrolling: touch; }
/* scroll-snap-type fights programmatic scrollLeft changes (the browser keeps snapping back to
   the nearest card), which would otherwise make the auto-scroll below a no-op — suspended only
   while it's actively animating, so manual swipe/scroll still snaps to a card as normal. */
.pgs-property-row.is-auto-scrolling { scroll-snap-type: none; }
/* Cards already stretch to equal height as flex siblings — this makes each card's own content
   fill that height and pins its "Enquire Now" button to the bottom, so cards with shorter
   location/tag text don't end up with their button sitting higher than the others. */
.pgs-property-row .pgs-property-card { flex: 0 0 280px; scroll-snap-align: start; display: flex; flex-direction: column; }
.pgs-property-row-next {
  position: absolute; top: 40%; right: -14px; transform: translateY(-50%); width: 40px; height: 40px;
  border-radius: 50%; border: 1px solid var(--pg-border); background: #fff; color: var(--pg-text);
  display: flex; align-items: center; justify-content: center; box-shadow: var(--pg-shadow); cursor: pointer;
}
.pgs-property-row-next svg { width: 18px; height: 18px; }

.pgs-property-card { background: #fff; border: 1px solid var(--pg-border); border-radius: var(--pg-radius-md); overflow: hidden; box-shadow: var(--pg-shadow-sm); }
.pgs-property-media { position: relative; }
.pgs-property-badge { position: absolute; top: var(--pg-space-3); left: var(--pg-space-3); }
.pgs-property-card img { height: 190px; width: 100%; object-fit: cover; }
.pgs-img-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; height: 190px; width: 100%; background: var(--pg-bg); color: var(--pg-text-faint); }
.pgs-img-placeholder svg { width: 28px; height: 28px; opacity: 0.6; }
.pgs-img-placeholder span { font-size: 0.72rem; font-weight: 600; }
.pgs-room-card .pgs-img-placeholder { height: 200px; }
.pgs-img-placeholder.is-hero { height: 100%; min-height: 320px; border-radius: var(--pg-radius-lg); }
.pgs-img-placeholder.is-hero svg { width: 48px; height: 48px; }
.pgs-img-placeholder.is-hero span { font-size: 1rem; }
.pgs-property-card-body { padding: var(--pg-space-4); display: flex; flex-direction: column; flex: 1; }
.pgs-property-card-body .pgs-card-actions { margin-top: auto; }
.pgs-property-card h3 { font-size: 1rem; margin-bottom: 4px; }
.pgs-property-card .pgs-loc { font-size: 0.8rem; color: var(--pg-text-faint); margin-bottom: 10px; }
.pgs-tag-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--pg-space-3); }
.pgs-tag { font-size: 0.72rem; font-weight: 600; background: var(--pg-bg); border: 1px solid var(--pg-border); padding: 4px 9px; border-radius: var(--pg-radius-full); color: var(--pg-text-muted); }
.pgs-price { font-size: 1.15rem; font-weight: 800; color: var(--pg-primary); }
.pgs-price span { font-size: 0.76rem; font-weight: 500; color: var(--pg-text-faint); }
.pgs-card-actions { display: flex; gap: var(--pg-space-2); margin-top: var(--pg-space-3); }

.pgs-room-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--pg-border); border-radius: var(--pg-radius-md); overflow: hidden; box-shadow: var(--pg-shadow-sm); }
.pgs-room-card img { width: 100%; height: 200px; object-fit: cover; }
.pgs-room-card-body { padding: var(--pg-space-4); flex: 1; display: flex; flex-direction: column; }

.pgs-filter-panel { display: flex; flex-direction: column; gap: var(--pg-space-4); }
.pgs-filter-panel h3 { font-size: 0.95rem; margin-bottom: var(--pg-space-3); }
.pgs-amenity-check { display: flex; align-items: center; gap: 8px; font-size: 0.84rem; padding: 6px 0; }

.pgs-facility-card { background: #fff; border: 1px solid var(--pg-border); border-radius: var(--pg-radius-md); overflow: hidden; box-shadow: var(--pg-shadow-sm); }
.pgs-facility-card img { width: 100%; height: 140px; object-fit: cover; }
.pgs-facility-placeholder { height: 140px; }
.pgs-facility-placeholder svg { width: 32px; height: 32px; }
.pgs-facility-card-body { padding: var(--pg-space-4); }
.pgs-facility-card .pgs-icon-chip { margin-bottom: var(--pg-space-2); }
.pgs-facility-card h3 { font-size: 0.94rem; margin-bottom: 4px; }
.pgs-facility-card p { font-size: 0.8rem; color: var(--pg-text-muted); }

.pgs-cta-banner {
  background: var(--pg-primary-50); border-radius: var(--pg-radius-lg); padding: var(--pg-space-6);
  display: flex; flex-direction: column; gap: var(--pg-space-4); align-items: flex-start;
}
.pgs-cta-banner.is-dark { background: var(--pg-primary-gradient); color: #fff; }
.pgs-cta-banner h3 { font-size: 1.2rem; }
.pgs-cta-actions { display: flex; gap: var(--pg-space-2); flex-wrap: wrap; }

.pgs-trust-line { text-align: center; padding: var(--pg-space-5) 0; border-top: 1px solid var(--pg-border); font-size: 0.86rem; font-weight: 600; color: var(--pg-text-muted); }

.pgs-gallery-pill-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: var(--pg-space-5); -webkit-overflow-scrolling: touch; }
.pgs-gallery-pill { flex-shrink: 0; padding: 8px 16px; border-radius: var(--pg-radius-full); font-size: 0.82rem; font-weight: 600; background: #fff; border: 1px solid var(--pg-border); color: var(--pg-text-muted); }
.pgs-gallery-pill.is-active { background: var(--pg-primary-gradient); color: #fff; border-color: transparent; }
.pgs-gallery-photo { display: block; width: 100%; padding: 0; margin: 0; border: 0; background: none; cursor: pointer; position: relative; border-radius: var(--pg-radius-md); overflow: hidden; }
.pgs-gallery-photo img { height: 150px; width: 100%; object-fit: cover; display: block; }
.pgs-gallery-caption { font-size: 0.8rem; font-weight: 600; margin-top: 6px; }

.pgs-lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(10, 8, 30, 0.92); display: flex; align-items: center; justify-content: center; padding: var(--pg-space-4); }
.pgs-lightbox[hidden] { display: none; }
body.pgs-lightbox-open { overflow: hidden; }
.pgs-lightbox-figure { max-width: 100%; max-height: 100%; margin: 0; display: flex; flex-direction: column; align-items: center; gap: var(--pg-space-2); }
.pgs-lightbox-figure img { max-width: 100%; max-height: 70vh; border-radius: var(--pg-radius-md); object-fit: contain; }
.pgs-lightbox-figure figcaption { color: #fff; font-size: 0.88rem; text-align: center; }
.pgs-lightbox-close { position: absolute; top: var(--pg-space-4); right: var(--pg-space-4); width: 40px; height: 40px; border-radius: var(--pg-radius-full); border: 0; background: rgba(255,255,255,0.12); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.pgs-lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: var(--pg-radius-full); border: 0; background: rgba(255,255,255,0.12); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.pgs-lightbox-prev { left: var(--pg-space-2); }
.pgs-lightbox-next { right: var(--pg-space-2); }
@media (min-width: 640px) {
  .pgs-lightbox-prev { left: var(--pg-space-5); }
  .pgs-lightbox-next { right: var(--pg-space-5); }
}

.pgs-contact-row { display: flex; align-items: flex-start; gap: 12px; padding: var(--pg-space-3) 0; border-bottom: 1px solid var(--pg-border); }
.pgs-contact-row:last-child { border-bottom: none; }
.pgs-contact-row strong { display: block; font-size: 0.88rem; }
.pgs-contact-row span, .pgs-contact-row a { font-size: 0.8rem; color: var(--pg-text-faint); text-decoration: none; }
.pgs-contact-row a:hover { color: var(--pg-primary); text-decoration: underline; }

.pgs-property-switch { max-width: 180px; }

.pgs-vacancy-table { width: 100%; }
.pgs-vacancy-table th { text-align: left; font-size: 0.72rem; text-transform: uppercase; color: var(--pg-text-faint); padding: 10px; border-bottom: 1px solid var(--pg-border); }
.pgs-vacancy-table td { padding: 12px 10px; border-bottom: 1px solid var(--pg-border); font-size: 0.86rem; }
.pgs-avail-yes { color: var(--pg-success); font-weight: 700; }
.pgs-avail-limited { color: var(--pg-warning); font-weight: 700; }
.pgs-avail-no { color: var(--pg-danger); font-weight: 700; }

/* Vacancy table with a trailing action column: too many columns for a fixed-width mobile
   table, so stack each row as a labelled card below 640px instead of clipping the last column. */
.pgs-vacancy-table-actions thead { display: none; }
.pgs-vacancy-table-actions, .pgs-vacancy-table-actions tbody, .pgs-vacancy-table-actions tr { display: block; width: 100%; }
.pgs-vacancy-table-actions tr { border-bottom: 1px solid var(--pg-border); padding: var(--pg-space-2) 0; }
.pgs-vacancy-table-actions tr:last-child { border-bottom: none; }
.pgs-vacancy-table-actions td { display: flex; align-items: center; justify-content: space-between; gap: var(--pg-space-3); padding: 4px 10px; border-bottom: none; }
.pgs-vacancy-table-actions td::before { content: attr(data-label); font-size: 0.72rem; text-transform: uppercase; font-weight: 700; color: var(--pg-text-faint); }
.pgs-vacancy-table-actions td.pgs-vacancy-action-cell { justify-content: flex-end; padding-top: var(--pg-space-2); }
.pgs-vacancy-table-actions td.pgs-vacancy-action-cell::before { content: none; }
@media (min-width: 640px) {
  .pgs-vacancy-table-actions thead { display: table-header-group; }
  .pgs-vacancy-table-actions, .pgs-vacancy-table-actions tbody, .pgs-vacancy-table-actions tr { display: revert; width: auto; }
  .pgs-vacancy-table-actions tr { border-bottom: 1px solid var(--pg-border); padding: 0; }
  .pgs-vacancy-table-actions td { display: table-cell; padding: 12px 10px; border-bottom: 1px solid var(--pg-border); }
  .pgs-vacancy-table-actions td::before { content: none; }
  .pgs-vacancy-table-actions td.pgs-vacancy-action-cell { padding-top: 12px; }
}

.pgs-footer { background: #14103A; color: rgba(255,255,255,0.75); padding: var(--pg-space-8) 0 var(--pg-space-5); margin-top: var(--pg-space-8); }
.pgs-footer h4 { color: #fff; font-size: 0.92rem; margin-bottom: var(--pg-space-3); }
.pgs-footer-grid { display: grid; grid-template-columns: 1fr; gap: var(--pg-space-6); margin-bottom: var(--pg-space-6); }
.pgs-footer a { font-size: 0.84rem; color: rgba(255,255,255,0.65); }
.pgs-footer-links { display: flex; flex-direction: column; gap: 10px; }
.pgs-footer-bottom { border-top: 1px solid rgba(255,255,255,0.12); padding-top: var(--pg-space-4); display: flex; flex-direction: column; gap: 10px; font-size: 0.78rem; }

.pgs-breadcrumb-bar { background: var(--pg-primary-50); padding: var(--pg-space-5) 0; }
.pgs-breadcrumb-bar h1 { font-size: 1.4rem; }
.pgs-breadcrumb-bar .pg-breadcrumb { margin-top: 6px; }
.pg-breadcrumb { font-size: 0.8rem; color: var(--pg-text-faint); }
.pg-breadcrumb a { color: var(--pg-primary); font-weight: 600; }

/* Stacking helper (public site doesn't load admin.css, so mirror it here) */
.pg-stack { display: flex; flex-direction: column; gap: var(--pg-space-4); }

/* Room detail: spec grid + spec rows */
.pgs-spec-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--pg-space-4); }
.pgs-spec-item { display: flex; flex-direction: column; gap: 4px; }
.pgs-spec-item span { font-size: 0.78rem; color: var(--pg-text-faint); }
.pgs-spec-item strong { font-size: 0.92rem; }
.pgs-spec-row { display: flex; align-items: center; justify-content: space-between; padding: var(--pg-space-2) 0; border-bottom: 1px solid var(--pg-border); font-size: 0.86rem; }
.pgs-spec-row:last-child { border-bottom: none; font-weight: 700; font-size: 0.92rem; }

/* Vacancies: simple stat blocks (page doesn't load admin.css pg-stat-card) */
.pgs-stat-block { display: flex; flex-direction: column; gap: 4px; }
.pgs-stat-number { font-size: 2rem; font-weight: 800; color: var(--pg-primary); line-height: 1.1; }

/* Standalone block heading (used inside pg-card blocks on room detail etc.) */
.pgs-block-title { font-size: 1.05rem; }

/* Legal pages: long-form text needs a readable line length and comfortable leading */
.pgs-legal-card { max-width: 760px; margin: 0 auto; line-height: 1.7; }

/* Contact: map image card + 2-col field row */
.pgs-map-card img { width: 100%; height: 220px; object-fit: cover; }
.pgs-map-card iframe { width: 100%; height: 220px; border: 0; display: block; }
.pgs-map-placeholder { width: 100%; height: 220px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--pg-space-2); background: var(--pg-bg); color: var(--pg-text-faint); text-align: center; padding: var(--pg-space-4); }
.pgs-map-placeholder svg { width: 32px; height: 32px; opacity: 0.6; }
.pgs-field-row-2 { display: grid; grid-template-columns: 1fr; gap: var(--pg-space-4); }
.pgs-field-row-3 { display: grid; grid-template-columns: 1fr; gap: var(--pg-space-4); }

@media (min-width: 768px) {
  .pgs-nav { display: flex; }
  .pgs-menu-toggle { display: none; }
  .pgs-mobile-nav { display: none !important; }
  .pgs-phone { display: block; }
  .pgs-hero-grid { grid-template-columns: 1.1fr 0.9fr; }
  .pgs-trust-strip { grid-template-columns: repeat(4, 1fr); }
  .pgs-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
  .pgs-grid.cols-2-wide { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); align-items: start; }
  .pgs-grid.cols-2-wide-right { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); align-items: start; }
  .pgs-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
  .pgs-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
  .pgs-grid.cols-6 { grid-template-columns: repeat(6, 1fr); }
  .pgs-field-row-2 { grid-template-columns: 1fr 1fr; }
  .pgs-field-row-3 { grid-template-columns: repeat(3, 1fr); }
  .pgs-room-card { flex-direction: row; }
  .pgs-room-card img { width: 300px; height: auto; flex-shrink: 0; }
  .pgs-room-card .pgs-img-placeholder { width: 300px; height: auto; flex-shrink: 0; }
  .pgs-cta-banner { flex-direction: row; align-items: center; justify-content: space-between; }
  .pgs-footer-grid { grid-template-columns: repeat(4, 1fr); }
  .pgs-footer-bottom { flex-direction: row; align-items: center; justify-content: space-between; }
}

@media (min-width: 1024px) {
  .pgs-rooms-layout { display: grid; grid-template-columns: 280px 1fr; gap: var(--pg-space-6); align-items: start; }
  .pgs-room-detail-layout { display: grid; grid-template-columns: 1fr 340px; gap: var(--pg-space-6); align-items: start; }
  /* Only widescreen has room for text + image + the search card side by side — below this the
     search card just flows onto its own row under the 2-column text/image pair. */
  .pgs-hero-grid { grid-template-columns: 1.05fr 0.95fr 0.85fr; }
  .pgs-hero-img { height: 100%; }
}