/* ================================================================
   GhanaTRVL — Entity / TSP Page Addon Stylesheet
   entities-addon-v4.css

   Load order: custom-v4.css → entities-addon-v4.css
   Selector: $selectStylesheet = 3 in _entity_body.php

   This file contains ONLY classes that are net-new to entity
   (TSP) pages. It never duplicates or overrides:

     custom-v4.css
       :root tokens, §02 base typography, §03 badge colours,
       §04-05 nav, §06 social share, §07 hero layers and
       .page-hero, §09 eyebrow/sh2/sdesc, §12 .acard family,
       §17 button system (.btn-cta / .btn-o), §18 footer,
       §20 utility helpers (.bg-wh2 etc.)

     result-pages-addon-v4.css
       §22 rp-hero, rp-breadcrumb, rp-statsbar, filter-bar,
       .rcard, .evcard, .tcard, pagination

     article-addon-v4.css
       §23 art-hero, art-prose, art-author-card, art-author-btn,
       Leaflet core overrides (§23-R)

   Section index
   ─────────────────────────────────────────────────────────────
   §25-A  Entity hero — full-bleed one-pager (.ent-hero)
          STATUS: STUB — populates during Gold / Silver build

   §25-B  Closed / ceased-trading notice (.ent-closed-*)
          STATUS: ACTIVE — used by __entity_section_closed.php

   §25-C  Entity about / info widget (.ent-about)
          STATUS: STUB — populates during Starter build

   §25-D  Entity contact row (.ent-contact)
          STATUS: STUB — populates during Starter build

   §25-E  Entity facilities grid (.ent-fac)
          STATUS: STUB — populates during Silver build

   §25-F  Entity description section (.ent-desc)
          STATUS: STUB — populates during Silver build

   §25-G  Entity check-in / check-out (.ent-checkinout)
          STATUS: STUB — populates during Silver build

   §25-H  Entity map (.ent-map)
          STATUS: STUB — populates during Silver build

   §25-I  Entity gallery (.ent-gallery)
          STATUS: STUB — populates during Silver / Gold build

   §25-J  Entity rooms grid (.ent-rooms)
          STATUS: STUB — populates during Gold build

   §25-K  Entity features / AEF section (.ent-features)
          STATUS: STUB — populates during Gold build

   §25-L  Entity places-to-see carousel (.ent-pts)
          STATUS: ACTIVE — used by closed and starter partials

   §25-M  Entity Booking.com widget (.ent-booking)
          STATUS: STUB — populates during Gold build

   §25-N  Entity donation widget (.ent-donations)
          STATUS: STUB — deferred (module not yet built)

   §25-Z  Responsive overrides
          STATUS: ACTIVE — grows as each section is added

   Last updated: 2026-06-11
================================================================ */


/* ================================================================
   §25-A. ENTITY HERO — full-bleed one-pager
   ─────────────────────────────────────────────────────────────
   The Gold and Silver entity pages use a full-bleed hero with
   an entity-supplied image, a sticky in-page navigation bar,
   and a stats band (tier, rating, price range).

   STUB — populated during Silver / Gold partial build.
   The shared .page-hero from custom-v4.css §07 handles the
   Starter and Closed hero; this section is for the entity-
   specific full-bleed variant with in-page nav.
================================================================ */

/* §25-A stubs go here */


/* ================================================================
   §25-B. CLOSED / CEASED-TRADING NOTICE
   ─────────────────────────────────────────────────────────────
   Used by __entity_section_closed.php (account_level_id = 99).

   Design intent: muted purple top accent communicates "inactive"
   without alarming red. Centered card layout within the centred
   col-lg-8 container column. Body text uses --ff-s (Source Serif)
   to soften the message. Max-width on body copy limits line
   length for readability at wide viewport.
================================================================ */

.ent-closed-notice {
  background: #fff;
  border: 1px solid var(--rule);
  border-top: 4px solid var(--mu);
  border-radius: 0 0 8px 8px;
  padding: 2.5rem 2rem;
  text-align: center;
  box-shadow: 0 4px 24px rgba(35,15,66,.07);
}

.ent-closed-icon {
  font-size: 3rem;
  line-height: 1;
  color: var(--mu);
  opacity: .65;
  margin-bottom: 1.25rem;
}

.ent-closed-title {
  font-family: var(--ff-h);
  font-size: clamp(1.2rem, 2.5vw, 1.6rem);
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--bk);
  margin-bottom: .75rem;
}

.ent-closed-body {
  font-family: var(--ff-s);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--mu);
  max-width: 46ch;
  margin: 0 auto .75rem;
}

.ent-closed-meta {
  font-family: var(--ff-h);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--mu);
  opacity: .75;
  margin-bottom: 0;
}


/* ================================================================
   §25-C. ENTITY ABOUT / INFO WIDGET
   ─────────────────────────────────────────────────────────────
   Used by __entity_section_starter.php and Silver pages.
   Shows entity type, categories, rating, location, address.
================================================================ */

.ent-about {
  padding: 0;
}

.ent-about-type {
  font-family: var(--ff-h);
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--mv);
}

.ent-about-rating {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
}

.ent-about-rating-label {
  font-family: var(--ff-h);
  font-weight: 600;
  color: var(--mu);
}

.star-active {
  color: var(--mv) !important;
}

.ent-about-location {
  font-family: var(--ff-h);
  font-size: .9rem;
  font-weight: 500;
  color: var(--dv);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
}

.ent-flag {
  width: 18px;
  height: auto;
  vertical-align: middle;
  border-radius: 2px;
}

.ent-about-address {
  font-family: var(--ff-h);
  font-size: .875rem;
  color: var(--mu);
  display: flex;
  align-items: flex-start;
  gap: 4px;
  line-height: 1.5;
}

.ent-about-address--postal {
  margin-top: .25rem;
}

.ent-about-slogan {
  font-family: var(--ff-s);
  font-size: 1rem;
  font-style: italic;
  color: var(--mu);
  border-left: 3px solid var(--ye);
  padding-left: .75rem;
  margin-top: 1rem;
  margin-bottom: 0;
}

/* Starter description — real social_media_text supplied by ET.
   Shown between hero and about/contact when $blnHasDescription = true. */
.ent-starter-desc {
  font-family: var(--ff-s);
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--dv);
  margin-bottom: 0;
}


/* ================================================================
   §25-D. ENTITY CONTACT BOX
   ─────────────────────────────────────────────────────────────
   Used by __entity_section_starter.php.
   Contains phone and email buttons + last-updated meta.

   view-contacts.php fragment classes (.vc-*) are also defined
   here since the fragment is only ever shown within entity pages.
================================================================ */

.ent-contact-box {
  background: #fff;
  border: 1px solid var(--rule);
  border-top: 4px solid var(--mv);
  border-radius: 0 0 8px 8px;
  padding: 1.75rem 1.5rem;
  box-shadow: 0 4px 24px rgba(35,15,66,.07);
}

.ent-contact-heading {
  font-family: var(--ff-h);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--mv);
  margin-bottom: 1.25rem;
}

.ent-contact-buttons {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.ent-contact-updated {
  font-family: var(--ff-h);
  font-size: .75rem;
  font-weight: 500;
  color: var(--mu);
  opacity: .75;
  margin-top: 1.25rem;
  margin-bottom: 0;
}

/* view-contacts.php fragment styles -------------------------------- */

.vc-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.vc-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .875rem 0;
  border-bottom: 1px solid var(--rule);
}

.vc-item:last-child {
  border-bottom: none;
}

.vc-icon {
  flex-shrink: 0;
  width: 2rem;
  text-align: center;
  font-size: 1.15rem;
  color: var(--mv);
}

.vc-label {
  font-family: var(--ff-h);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--mu);
  min-width: 4.5rem;
  flex-shrink: 0;
}

.vc-contact-link,
.vc-contact-text {
  font-family: var(--ff-h);
  font-size: .95rem;
  font-weight: 600;
  color: var(--dv);
  text-decoration: none;
  word-break: break-all;
}

.vc-contact-link:hover {
  color: var(--mv);
  text-decoration: underline;
}

.vc-empty {
  font-family: var(--ff-h);
  font-size: .875rem;
  color: var(--mu);
  padding: 1rem 0;
  margin: 0;
}


/* ================================================================
   §25-E. ENTITY FACILITIES GRID
   ─────────────────────────────────────────────────────────────
   Responsive grid of facility groups (location, parking, general
   features, internet, etc.). Groups are headed by a duotone FA
   icon and a group label. Each item is a light icon + label.
   Silver and above.

   STUB — populated during Silver build.
================================================================ */

/* §25-E stubs go here */


/* ================================================================
   §25-F. ENTITY DESCRIPTION SECTION
   ─────────────────────────────────────────────────────────────
   Full description rendered from ENT_DESCRIPTION (trusted ET
   HTML). Uses Source Serif 4 prose styling consistent with
   article pages. Silver and above.

   STUB — populated during Silver build.
================================================================ */

/* §25-F stubs go here */


/* ================================================================
   §25-G. ENTITY CHECK-IN / CHECK-OUT
   ─────────────────────────────────────────────────────────────
   Check-in and check-out time display. Hospitality entity type
   only. Displayed in sidebar on Silver; inline on Gold.

   STUB — populated during Silver build.
================================================================ */

/* §25-G stubs go here */


/* ================================================================
   §25-H. ENTITY MAP
   ─────────────────────────────────────────────────────────────
   Used by __entity_section_starter.php and Silver/Gold pages.
   Leaflet map with single entity pin. leaflet.css loaded via
   __head.php (selectStylesheet = 3); leaflet.js via __javascript.php
   when $ShowMap_entity = true.

   .ent-map-pin uses a Font Awesome icon as the Leaflet divIcon,
   avoiding default Leaflet image path issues with local JS loading.
================================================================ */

.ent-map-wrap {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(35,15,66,.10);
  border: 1px solid var(--rule);
}

.ent-map {
  height: 400px;
  width: 100%;
  background: var(--wh);
}

/* Custom Leaflet divIcon pin */
.ent-map-pin {
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ent-map-pin .fa-location-dot {
  font-size: 2.25rem;
  color: var(--mv);
  filter: drop-shadow(0 2px 4px rgba(35,15,66,.35));
  line-height: 1;
}

/* Popup content */
.ent-map-popup-name {
  display: block;
  font-family: var(--ff-h);
  font-size: .875rem;
  font-weight: 700;
  color: var(--dv);
  margin-bottom: 2px;
}

.ent-map-popup-city {
  display: block;
  font-family: var(--ff-h);
  font-size: .775rem;
  color: var(--mu);
}


/* ================================================================
   §25-I. ENTITY GALLERY
   ─────────────────────────────────────────────────────────────
   Masonry-style image grid with GLightbox. Thumbnail images link
   to full-size L images. Gold: all gallery images. Silver: first
   8 images only (cnt_images guard in partial).

   STUB — populated during Silver / Gold build.
================================================================ */

/* §25-I stubs go here */


/* ================================================================
   §25-J. ENTITY ROOMS GRID
   ─────────────────────────────────────────────────────────────
   Room type cards for hospitality entities. Each card shows
   room type image, name, category, bed type, capacity, size,
   and rate. GLightbox used for room detail overlays.
   Gold and above, hospitality entity type only.

   STUB — populated during Gold build.
================================================================ */

/* §25-J stubs go here */


/* ================================================================
   §25-K. ENTITY FEATURES / AEF SECTION
   ─────────────────────────────────────────────────────────────
   Cards linking to Additional Feature sub-pages (bars,
   restaurants, pools, beaches etc.). Each card shows the AEF
   image, type icon, name, and blurb with a "More details" link
   to the routed AEF page. Gold and above.

   STUB — populated during Gold build.
================================================================ */

/* §25-K stubs go here */


/* ================================================================
   §25-L. ENTITY PLACES-TO-SEE CAROUSEL
   ─────────────────────────────────────────────────────────────
   Nearby articles displayed as a Bootstrap grid of .acard cards
   (custom-v4.css §12). The only entity-specific addition is the
   distance indicator row shown above the card title.

   Distance icon logic (PHP in partial):
     < 1 km    → fa-person-hiking  (walking)
     1–2 km    → fa-person-hiking  (walking)
     2–8 km    → fa-person-biking  (cycling)
     ≥ 8 km    → fa-car-side       (driving)

   Used by: __entity_section_closed.php
            __entity_section_starter.php (next build)
================================================================ */

.ent-pts-distance {
  display: flex;
  align-items: center;
  gap: 3px;
  font-family: var(--ff-h);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--mu);
  margin-bottom: 8px;
}

.ent-pts-distance span {
  margin-left: 1px;
}

/* ── Alternative entity cards ───────────────────────────────────────── */

/* "Full profile" badge — shown on Silver/Gold alternatives only.
   Positioned bottom-left of card image to stay out of the focal area. */
.ent-alt-card {
  position: relative;
}

.ent-alt-badge {
  position: absolute;
  bottom: .5rem;
  left: .5rem;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: var(--gr);
  color: #fff;
  font-family: var(--ff-h);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: .2rem .5rem;
  border-radius: 4px;
  line-height: 1.4;
  pointer-events: none;
}

/* City + distance meta row below card title */
.ent-alt-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--ff-h);
  font-size: .8rem;
  color: var(--mu);
  margin-bottom: 4px;
  gap: .5rem;
}

.ent-alt-distance {
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}


/* ================================================================
   §25-M. ENTITY BOOKING.COM WIDGET
   ─────────────────────────────────────────────────────────────
   Booking.com affiliate panel shown when booking_com_url is
   present. Displayed in the Gold sidebar below check-in times.

   STUB — populated during Gold build.
================================================================ */

/* §25-M stubs go here */


/* ================================================================
   §25-N. ENTITY DONATION WIDGET
   ─────────────────────────────────────────────────────────────
   Donation CTA block routing via goto_click (roi_click_type_id
   = 15, reserved). Deferred — ITF module not yet built.

   STUB — populated when ITF donation module is built.
================================================================ */

/* §25-N stubs go here */


/* ================================================================
   §25-Z. RESPONSIVE OVERRIDES
   ─────────────────────────────────────────────────────────────
   Mobile-first overrides for all entity page sections.
   Grow this section as each partial section is added.
================================================================ */

/* ── Closed notice — full padding on small screens ── */
@media (max-width: 575.98px) {

  .ent-closed-notice {
    padding: 2rem 1.25rem;
  }

  .ent-closed-icon {
    font-size: 2.25rem;
  }

}

/* ── Contact box — full width on small screens ── */
@media (max-width: 991.98px) {

  .ent-contact-box {
    margin-top: 0;
  }

}

@media (max-width: 575.98px) {

  .ent-contact-box {
    padding: 1.5rem 1.25rem;
  }

}

/* ── Map — reduced height on mobile ── */
@media (max-width: 575.98px) {

  .ent-map {
    height: 280px;
  }

}