/* ==================================================
   BALADIN ZANZIBAR — PAGE-SPECIFIC STYLES
   Styles used only by individual inner pages.

   1. Rooms page
   2. Amenity lists
   3. Restaurant and menu page
   4. Experiences page
   5. About page timeline
   6. Contact page
   7. Policy pages (privacy and cookies)
   8. Enquiry panel (How Can We Help You?)
   ================================================== */


/* ==================================================
   1. ROOMS PAGE
   ================================================== */
.room-detail { padding-block: var(--space-5); border-bottom: var(--border-thin); }
.room-detail:last-of-type { border-bottom: 0; }
.room-detail__grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--space-5); align-items: start; }
.room-gallery__main { aspect-ratio: 4 / 3; overflow: hidden; width: 100%; border: 0; padding: 0; background: var(--color-sand); }
.room-gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.room-gallery__thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; margin-top: 0.6rem; }
.room-gallery__thumbs button { aspect-ratio: 4 / 3; overflow: hidden; border: 0; padding: 0; background: var(--color-sand); }
.room-gallery__thumbs img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease-smooth); }
.room-gallery__thumbs button:hover img { transform: scale(1.06); }

.spec-table { width: 100%; border-collapse: collapse; margin: var(--space-3) 0; font-size: 0.95rem; }
.spec-table th, .spec-table td { text-align: left; padding: 0.75rem 0; border-bottom: var(--border-thin); vertical-align: top; }
.spec-table th { width: 38%; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-forest); font-weight: 700; }


/* ==================================================
   2. AMENITY LISTS
   ================================================== */
.amenity-groups { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.amenity-group h3 { font-size: 1.5rem; padding-bottom: var(--space-1); border-bottom: 1px solid var(--color-gold); }
.amenity-list { list-style: none; }
.amenity-list li { display: flex; align-items: center; gap: 0.8rem; padding: 0.55rem 0; font-size: 0.95rem; }
.amenity-icon { flex: none; width: 22px; height: 22px; color: var(--color-gold-dark); }


/* ==================================================
   3. RESTAURANT AND MENU PAGE
   ================================================== */
.menu-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: var(--space-4); }
.menu-tabs a {
  padding: 0.6rem 1.2rem;
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--color-line);
  background: var(--color-white);
}
.menu-tabs a:hover { border-color: var(--color-gold); color: var(--color-gold-dark); }

.menu-section { padding-block: var(--space-4); border-top: var(--border-thin); }
.menu-section__grid { display: grid; grid-template-columns: 1fr 2fr; gap: var(--space-4); }
.menu-items { list-style: none; }
.menu-item { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.85rem 0; border-bottom: 1px dotted var(--color-line); }
.menu-item__name { font-family: var(--font-heading); font-size: 1.4rem; font-weight: 500; color: var(--color-ocean); }
.menu-item__desc { display: block; font-size: 0.88rem; color: var(--color-muted); }
.menu-item__price { font-weight: 700; white-space: nowrap; color: var(--color-gold-dark); }
.menu-empty { padding: var(--space-3); background: rgba(185, 154, 100, 0.12); border-left: 3px solid var(--color-gold); font-size: 0.92rem; }

.special-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.special-card { padding: var(--space-4) var(--space-3); background: var(--color-white); border-top: 3px solid var(--color-gold); }
.special-card h3 { margin-bottom: 0.4rem; }
.special-card p { margin: 0; color: var(--color-muted); font-size: 0.95rem; }


/* ==================================================
   4. EXPERIENCES PAGE
   ================================================== */
.activity { padding-block: var(--space-5); }
.activity__facts { list-style: none; margin: var(--space-3) 0; }
.activity__facts li { padding: 0.55rem 0; border-bottom: var(--border-thin); display: flex; justify-content: space-between; gap: 1rem; }
.activity__facts span:first-child { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-forest); }


/* ==================================================
   5. ABOUT PAGE TIMELINE
   ================================================== */
.timeline { list-style: none; position: relative; margin-top: var(--space-4); padding-left: var(--space-4); border-left: 1px solid var(--color-gold); }
.timeline__item { position: relative; padding-bottom: var(--space-4); }
.timeline__item::before { content: ""; position: absolute; left: calc(-1 * var(--space-4) - 6px); top: 0.9rem; width: 11px; height: 11px; border-radius: 50%; background: var(--color-gold); }
.timeline__year { font-family: var(--font-heading); font-size: 2.6rem; color: var(--color-gold-dark); line-height: 1; }


/* ==================================================
   6. CONTACT PAGE
   ================================================== */
.contact-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--space-5); align-items: start; }
.contact-list { list-style: none; }
.contact-list li { padding: var(--space-2) 0; border-bottom: var(--border-thin); }
.contact-list__label { display: block; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-gold-dark); }
.contact-list a { text-decoration: none; font-weight: 600; color: var(--color-ocean); }
.contact-list a:hover { color: var(--color-gold-dark); }


/* ==================================================
   7. POLICY PAGES
   ================================================== */
.policy { padding-block: var(--space-6); }
.policy h2 { font-size: 2rem; margin-top: var(--space-4); }
.policy ul { margin: 0 0 var(--space-2) 1.3rem; }
.policy li { margin-bottom: 0.4rem; }
.policy table { width: 100%; border-collapse: collapse; margin: var(--space-2) 0 var(--space-3); font-size: 0.92rem; }
.policy th, .policy td { padding: 0.7rem; text-align: left; border: var(--border-thin); vertical-align: top; }
.policy th { background: var(--color-sand); }
.owner-check { padding: var(--space-2) var(--space-3); border-left: 4px solid var(--color-gold); background: rgba(185, 154, 100, 0.15); font-size: 0.92rem; }


/* ==================================================
   8. ENQUIRY PANEL (HOW CAN WE HELP YOU?)
   Markup created by js/enquiries.js
   ================================================== */
.enquiry-panel__categories { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: var(--space-3); }
.enquiry-category {
  padding: 0.6rem 1.1rem;
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em;
  background: var(--color-ivory);
  border: 1px solid var(--color-line);
  transition: background var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast);
}
.enquiry-category:hover { border-color: var(--color-gold); }
.enquiry-category[aria-pressed="true"] { background: var(--color-ocean); color: var(--color-white); border-color: var(--color-ocean); }
.enquiry-panel__title { font-size: 1.8rem; }


/* ==================================================
   RESPONSIVE ADJUSTMENTS FOR THE ABOVE
   (kept here so each component stays self-contained)
   ================================================== */
@media (max-width: 900px) {
  .room-detail__grid,
  .contact-grid,
  .menu-section__grid { grid-template-columns: 1fr; gap: var(--space-3); }
  .amenity-groups,
  .special-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .timeline { padding-left: var(--space-3); }
  .timeline__item::before { left: calc(-1 * var(--space-3) - 6px); }
  .policy table { display: block; overflow-x: auto; }
}