/* Ambassador Hotel Berbera: main stylesheet (Website 2.0)
   Colours, type scale and spacing come from tokens.css, which every page links first.
   Montserrat is loaded with a <link> in each page's <head>.
   Sections are built as section > container > row > columns, so they map to Divi. */

/* ==========================================================================
   1. Base
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  font-family: var(--font);
  font-weight: var(--weight-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

@media (min-width: 900px) {
  body {
    font-size: 1.0625rem; /* 17px */
  }
}

img,
iframe,
video {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

h1,
h2,
h3 {
  margin: 0 0 var(--space-2);
  font-weight: var(--weight-heading);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--green);
}

h2 {
  font-size: clamp(1.75rem, 1.35rem + 1.5vw, 2.5rem);
}

h3 {
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  line-height: 1.25;
}

p {
  margin: 0 0 var(--space-2);
  max-width: 65ch;
}

a {
  color: var(--green);
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

address {
  font-style: normal;
}

:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 3px;
}

.on-dark :focus-visible,
.on-photo :focus-visible {
  outline-color: var(--white);
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: var(--space-1);
  left: var(--space-1);
  z-index: 100;
  padding: var(--space-1) var(--space-2);
  background: var(--green);
  color: var(--white);
  font-weight: var(--weight-label);
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

/* Visible placeholder for facts still waiting on the client.
   Every one must also be listed in docs/03-open-questions.md. */
.tbc {
  padding: 0 0.3em;
  background: var(--sand);
  outline: 1px dashed var(--terracotta);
  color: var(--ink);
  font-weight: var(--weight-label);
}

/* ==========================================================================
   2. Layout: container, 12-column row, sections
   ========================================================================== */

.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 900px) {
  .row {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
  }

  .row--stretch {
    align-items: stretch;
  }

  .row--middle {
    align-items: center;
  }

  .row--end {
    align-items: end;
  }

  /* Column spans: .col-<start>-<end> on the 12-column grid */
  .col-1-5 { grid-column: 1 / 6; }
  .col-1-6 { grid-column: 1 / 7; }
  .col-1-7 { grid-column: 1 / 8; }
  .col-1-10 { grid-column: 1 / 11; }
  .col-6-12 { grid-column: 6 / 13; }
  .col-7-12 { grid-column: 7 / 13; }
  .col-8-12 { grid-column: 8 / 13; }
}

.section {
  padding-block: clamp(4rem, 2.5rem + 5vw, 7.5rem);
}

.section--tight {
  padding-block: clamp(3rem, 2rem + 3vw, 5rem);
}

.section--sand {
  background: var(--sand);
}

.section--centre {
  text-align: center;
}

.section--centre p {
  margin-inline: auto;
}

/* Compact sections: less vertical space, so the page flows tightly */
.section--compact {
  padding-block: clamp(3.75rem, 2.5rem + 3.5vw, 6rem);
}

/* Heading with one short line directly beneath it */
.section-head--stacked h2 {
  margin-bottom: var(--space-1);
}

.section-head--stacked p {
  margin-bottom: 0;
}

.section-head {
  margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}

.lead {
  font-size: var(--text-lg);
}

.muted {
  color: var(--ink-muted);
}

/* ==========================================================================
   3. Type helpers
   ========================================================================== */

/* Short tracked capitals. Use only where the label carries information. */
.label {
  font-size: 0.8125rem;
  font-weight: var(--weight-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  line-height: 1.4;
}

/* ==========================================================================
   4. Buttons and links
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.85em 1.6em;
  border: 1px solid var(--green);
  border-radius: var(--radius);
  background: var(--green);
  color: var(--white);
  font: inherit;
  font-size: 0.9688rem;
  font-weight: var(--weight-label);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.btn:hover {
  background: var(--green-deep);
  border-color: var(--green-deep);
}

/* White button for deep green or photo backgrounds */
.btn--light {
  background: var(--white);
  border-color: var(--white);
  color: var(--green);
}

.btn--light:hover {
  background: var(--sand);
  border-color: var(--sand);
  color: var(--green-deep);
}

/* Secondary action: an underlined text link, never a second solid button */
.link {
  display: inline-block;
  padding-block: 0.25em;
  color: var(--green);
  font-weight: var(--weight-label);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.35em;
  transition: text-decoration-thickness 0.15s ease;
}

.link:hover {
  text-decoration-thickness: 2px;
}

/* Call-to-action text link: slightly larger and heavier, with an arrow */
.link--cta {
  font-size: var(--text-lg);
  font-weight: var(--weight-heading);
}

/* inline-block keeps the underline off the arrow */
.link__arrow {
  display: inline-block;
  margin-left: 0.45em;
  text-decoration: none;
}

.link--light {
  color: var(--white);
}

/* Secondary button on light backgrounds: green outline, fills green on hover */
.btn--ghost {
  background: transparent;
  border-color: var(--green);
  color: var(--green);
}

.btn--ghost:hover {
  background: var(--green);
  border-color: var(--green);
  color: var(--white);
}

/* Secondary button on photographs: translucent green fill, white border and text */
.btn--ghost-light {
  background: color-mix(in srgb, var(--green-deep) 35%, transparent);
  border-color: var(--white);
  color: var(--white);
}

.btn--ghost-light:hover {
  background: color-mix(in srgb, var(--green-deep) 60%, transparent);
  border-color: var(--white);
}

button.link {
  border: 0;
  background: none;
  font: inherit;
  font-weight: var(--weight-label);
  cursor: pointer;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-4);
}

/* ==========================================================================
   5. Location pill (photographs only)
   ========================================================================== */

.pill {
  display: inline-block;
  padding: 0.55em 1.2em 0.5em;
  border-radius: var(--radius-pill);
  background: var(--green);
  color: var(--white);
  font-size: 0.75rem;
  font-weight: var(--weight-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  line-height: 1.3;
}

/* ==========================================================================
   6. Header
   Solid white by default. Pages with a photo hero add data-transparent
   to the header: it starts clear with the white logo and turns solid on scroll.
   ========================================================================== */

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  background: var(--white);
  border-bottom: 1px solid var(--line);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 96px;
}

/* Logo: never below 280px wide. Clear space comes from the header padding. */
.site-header__logo {
  flex: 0 0 auto;
  display: block;
  padding-block: var(--space-2);
}

.site-header__logo img {
  width: var(--logo-min-header);
  height: auto;
}

.logo-white {
  display: none;
}

.site-nav {
  margin-left: auto;
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 0.2rem + 1.4vw, 2rem);
}

.site-nav__list a {
  display: block;
  padding-block: 0.5rem;
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: var(--weight-label);
  text-decoration: none;
  text-underline-offset: 0.45em;
}

.site-nav__list a:hover,
.site-nav__list a[aria-current="page"] {
  color: var(--green);
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

.site-header__book {
  flex: 0 0 auto;
}

.menu-toggle {
  display: none;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-right: -10px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--green);
  cursor: pointer;
}

.menu-toggle svg {
  width: 26px;
  height: 26px;
}

.menu-toggle .icon-close,
.menu-toggle[aria-expanded="true"] .icon-open {
  display: none;
}

.menu-toggle[aria-expanded="true"] .icon-close {
  display: block;
}

/* Transparent state over a photo hero */
.site-header[data-transparent]:not(.is-scrolled):not(.is-open) {
  background: transparent;
  border-bottom-color: transparent;
}

.site-header[data-transparent]:not(.is-scrolled):not(.is-open) .logo-white {
  display: block;
}

.site-header[data-transparent]:not(.is-scrolled):not(.is-open) .logo-green {
  display: none;
}

.site-header[data-transparent]:not(.is-scrolled):not(.is-open) .site-nav__list a,
.site-header[data-transparent]:not(.is-scrolled):not(.is-open) .menu-toggle {
  color: var(--white);
  text-shadow: 0 1px 8px color-mix(in srgb, var(--green-deep) 60%, transparent);
}

.site-header[data-transparent]:not(.is-scrolled):not(.is-open) :focus-visible {
  outline-color: var(--white);
}

/* Pages without a photo hero leave room for the fixed header */
.has-solid-header {
  padding-top: 97px;
}

/* Below 1180px: menu button, full list in a drop-down panel */
@media (max-width: 1179px) {
  .menu-toggle {
    display: inline-flex;
  }

  .site-header__book {
    margin-left: auto;
  }

  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    max-height: calc(100vh - 96px);
    max-height: calc(100dvh - 96px);
    overflow-y: auto;
    background: var(--white);
    border-bottom: 1px solid var(--line);
  }

  .site-header.is-open .site-nav {
    display: block;
  }

  .site-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-width: calc(var(--container) + 2 * var(--gutter));
    margin-inline: auto;
    padding: var(--space-1) var(--gutter) var(--space-4);
  }

  .site-nav__list li + li {
    border-top: 1px solid var(--line);
  }

  .site-nav__list a {
    padding-block: 1rem;
    font-size: 1.0625rem;
  }
}

/* Phones: Book moves to the bottom action bar so the logo keeps its 280px */
@media (max-width: 559px) {
  .site-header__book {
    display: none;
  }

  .menu-toggle {
    margin-left: auto;
  }

  .site-header__inner {
    min-height: 88px;
    gap: var(--space-1);
  }
}

/* ==========================================================================
   7. Home hero, credentials bar and booking bar
   ========================================================================== */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 560px;
  height: 85vh;
  height: 85svh;
  max-height: 1000px;
  background: var(--green-deep);
  color: var(--white);
}

.hero__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hero__slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
}

.hero__slide.is-active {
  opacity: 1;
}

.hero__slide img,
.hero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Gentle green gradients: at the top for the white logo, at the base behind the
   headline. Never a box or a flat overlay across the whole photo. */
.hero__media::before,
.hero__media::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
  pointer-events: none;
}

/* Top (behind the white logo) and left (behind the headline), full height so there is no edge */
.hero__media::before {
  top: 0;
  bottom: 0;
  background:
    linear-gradient(to bottom, color-mix(in srgb, var(--green-deep) 60%, transparent), transparent 32%),
    linear-gradient(to right, color-mix(in srgb, var(--green-deep) 45%, transparent), transparent 60%);
}

/* Base gradient behind the bottom-left headline, so the text never relies on the
   busy centre of the photo (the signage on the exterior shot) */
.hero__media::after {
  bottom: 0;
  height: 65%;
  background: linear-gradient(to top, color-mix(in srgb, var(--green-deep) 60%, transparent), transparent);
}

.hero__content {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding-block: 120px clamp(2rem, 1rem + 3vw, 3.5rem);
  text-align: left;
  text-shadow: 0 1px 14px color-mix(in srgb, var(--green-deep) 70%, transparent);
}

.hero__content .pill {
  margin-bottom: var(--space-3);
  text-shadow: none;
}

.hero h1 {
  max-width: 15em;
  margin: 0 0 var(--space-2);
  color: var(--white);
  font-size: clamp(2rem, 1.1rem + 3vw, 3.5rem);
  line-height: 1.08;
  text-wrap: balance;
}

.hero__sub {
  max-width: 48ch;
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--weight-label);
}

.hero .actions {
  margin-top: var(--space-3);
}

/* Phones: keep the buttons clear of the pause control */
@media (max-width: 899px) {
  .hero__content {
    padding-bottom: 4.5rem;
  }
}

.hero .link--light {
  text-shadow: inherit;
}

/* Inner pages: a compact photo hero (one still photo, same gradients as home),
   with a short tracked label above the H1 */
.hero--page {
  min-height: 420px;
  height: 60vh;
  height: 60svh;
  max-height: 720px;
}

.hero__label {
  margin: 0 0 var(--space-2);
  color: var(--white);
  font-size: 0.75rem;
  font-weight: var(--weight-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

@media (max-width: 899px) {
  .hero--page .hero__content {
    padding-bottom: clamp(2rem, 1rem + 3vw, 3.5rem);
  }
}

/* Pause control for the crossfades (WCAG 2.2.2) */
.hero__pause {
  position: absolute;
  right: var(--gutter);
  bottom: calc(100% + var(--space-2));
}

.hero__pause,
.slideshow__pause {
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--white) 70%, transparent);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--green-deep) 45%, transparent);
  color: var(--white);
  cursor: pointer;
}

.hero__pause svg,
.slideshow__pause svg {
  width: 14px;
  height: 14px;
}

.hero__pause .icon-play,
.hero__pause[aria-pressed="true"] .icon-pause,
.slideshow__pause .icon-play,
.slideshow__pause[aria-pressed="true"] .icon-pause {
  display: none;
}

.hero__pause[aria-pressed="true"] .icon-play,
.slideshow__pause[aria-pressed="true"] .icon-play {
  display: block;
}

/* The signature element: Deep Green credentials bar at the base of the hero */
.credentials {
  position: relative;
  z-index: 2;
  background: var(--green-deep);
  color: var(--white);
}

.credentials__list {
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: space-between;
  padding-block: 1.25rem;
}

.credentials__list li {
  padding-inline: var(--space-3);
  border-left: 1px solid var(--terracotta);
  font-size: 0.75rem;
  text-align: center;
}

@media (min-width: 1180px) {
  .credentials__list li {
    white-space: nowrap;
  }
}

.credentials__list li:first-child {
  padding-left: 0;
  border-left: 0;
}

.credentials__list li:last-child {
  padding-right: 0;
}

@media (max-width: 899px) {
  .credentials__list {
    grid-template-columns: 1fr 1fr;
    padding-block: 0;
  }

  .credentials__list li {
    padding: 0.9rem 0.5rem;
    border-left: 0;
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
  }

  .credentials__list li:nth-child(even) {
    border-left: 1px solid var(--terracotta);
  }

  .credentials__list li:nth-child(n + 3) {
    border-top: 1px solid var(--terracotta);
  }

  .credentials__list li:first-child {
    padding-left: 0.5rem;
  }
}

/* Booking bar */
.booking {
  border-bottom: 1px solid var(--line);
  background: var(--white);
}

.booking__form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  align-items: end;
  gap: var(--space-2) var(--space-3);
  padding-block: var(--space-4);
}

/* Validation message: only takes space when a date is missing */
.booking__error {
  margin: calc(-1 * var(--space-2)) 0 0;
  padding-bottom: var(--space-3);
  max-width: none;
}

.booking__error:empty {
  display: none;
}

@media (max-width: 899px) {
  .booking__form {
    grid-template-columns: 1fr 1fr;
  }

  .booking__form .field--guests,
  .booking__form .btn {
    grid-column: span 1;
  }
}

@media (max-width: 459px) {
  .booking__form {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   8. Forms
   ========================================================================== */

.field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
}

.field label {
  font-size: var(--text-sm);
  font-weight: var(--weight-label);
  color: var(--ink);
}

.field input,
.field select {
  width: 100%;
  height: 50px;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--ink-muted);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
}

.field input:focus-visible,
.field select:focus-visible {
  border-color: var(--green);
  outline: 2px solid var(--green);
  outline-offset: 0;
}

.field select {
  appearance: none;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23056839' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
}

.field-error {
  margin: 0;
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: var(--weight-label);
}

/* ==========================================================================
   9. Images: fixed ratios, inset frame, captions
   ========================================================================== */

.media {
  position: relative;
  margin: 0;
}

.media img {
  width: 100%;
  object-fit: cover;
  border-radius: var(--radius);
}

.ratio-16x9 img { aspect-ratio: 16 / 9; }
.ratio-3x2 img { aspect-ratio: 3 / 2; }
.ratio-4x5 img { aspect-ratio: 4 / 5; }
.ratio-1x1 img { aspect-ratio: 1 / 1; }

/* 1px inset frame, about 12px in. Use on one or two images per page.
   Markup: figure.media.media--frame > div.media__img > img */
.media__img {
  position: relative;
}

.media--frame .media__img::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid color-mix(in srgb, var(--white) 85%, transparent);
  pointer-events: none;
}

.media figcaption {
  margin-top: 0.75rem;
  color: var(--ink-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-label);
}

/* ==========================================================================
   10. Fact list: label and value rows divided by hairlines
   ========================================================================== */

.facts {
  border-top: 1px solid var(--line);
}

.facts__row {
  display: grid;
  grid-template-columns: minmax(8rem, 2fr) 3fr;
  gap: var(--space-2);
  padding-block: 0.9rem;
  border-bottom: 1px solid var(--line);
  margin: 0;
}

.facts dt,
.facts__name {
  font-weight: var(--weight-label);
  color: var(--ink);
}

.facts dd {
  margin: 0;
  color: var(--ink-muted);
}

/* Linked variant: each row goes to its page */
.facts--links a {
  display: grid;
  grid-template-columns: minmax(8rem, 2fr) 3fr;
  gap: var(--space-2);
  padding-block: 1rem;
  border-bottom: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
}

.facts--links .facts__name {
  color: var(--green);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: transparent;
  text-underline-offset: 0.35em;
  transition: text-decoration-color 0.15s ease;
}

.facts--links a:hover .facts__name {
  text-decoration-color: currentColor;
}

.facts--links .facts__detail {
  color: var(--ink-muted);
}

@media (max-width: 459px) {
  .facts__row,
  .facts--links a {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }
}

/* ==========================================================================
   11. Tags (room and villa facts)
   ========================================================================== */

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-block: var(--space-3);
}

.tags li {
  padding: 0.35em 0.8em;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  font-size: 0.8125rem;
  font-weight: var(--weight-label);
  line-height: 1.4;
}

/* ==========================================================================
   12. Intro: heritage and the Hargeisa to Berbera line
   Text on the left (columns 1 to 6), photo on the right (columns 8 to 12).
   ========================================================================== */

.intro__text h2 {
  max-width: 16em;
}

/* Tighter than a standard section, so it follows the booking bar smoothly */
.section--intro {
  padding-block: clamp(3.75rem, 2.5rem + 3.5vw, 6rem);
}

.section--intro .route {
  margin-top: var(--space-4);
}

.route {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: var(--space-2);
  max-width: 34rem;
  margin-top: var(--space-5);
}

.route__stop {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.route__stop:last-child {
  text-align: right;
}

.route__name {
  font-weight: var(--weight-heading);
  color: var(--green);
}

.route__est {
  color: var(--ink-muted);
  font-size: var(--text-sm);
}

.route__line {
  position: relative;
  margin-top: 0.8rem;
  border-top: 1px solid var(--green);
  text-align: center;
}

.route__line::before,
.route__line::after {
  content: "";
  position: absolute;
  top: -5px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--green);
}

.route__line::before {
  left: 0;
}

.route__line::after {
  right: 0;
  background: var(--terracotta);
}

.route__time {
  display: inline-block;
  padding-top: 0.6rem;
  color: var(--ink-muted);
  font-size: var(--text-sm);
}

/* ==========================================================================
   13. Stay cards (rooms and villas)
   ========================================================================== */

.stay-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

@media (min-width: 900px) {
  .stay-cards {
    grid-template-columns: 1fr 1fr;
    gap: var(--gutter);
  }
}

/* Home: three equal blocks (Deluxe Rooms, En-Suite Rooms, Villas) */
@media (min-width: 900px) {
  .stay-cards--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* No box: the photo and text sit straight on the section background.
   Both items share one grid row, so the buttons align at the bottom. */
.stay-card {
  display: flex;
  flex-direction: column;
}

.stay-card h3 {
  margin-top: var(--space-3);
  margin-bottom: var(--space-1);
}

.stay-card h3 a {
  color: inherit;
  text-decoration: none;
}

.stay-card h3 a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}

.stay-card__actions {
  margin-top: auto;
  padding-top: var(--space-1);
}

/* ==========================================================================
   14. Banner: full-bleed photo with a content panel (events)
   ========================================================================== */

.banner {
  position: relative;
  background: var(--sand);
}

.banner__media img {
  width: 100%;
  height: clamp(420px, 36vw, 600px);
  object-fit: cover;
  border-radius: 0;
}

.banner__panel {
  max-width: 30rem;
  padding: clamp(1.75rem, 1rem + 2vw, 2.75rem);
  background: var(--sand);
  color: var(--ink);
}

.banner__panel h2 {
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2.125rem);
}

.banner__panel p:last-of-type {
  margin-bottom: 0;
}

.banner__panel .actions {
  margin-top: var(--space-3);
}

/* Desktop: the panel floats inside the photo, lower right, with an even margin */
@media (min-width: 900px) {
  .banner__overlay {
    position: absolute;
    right: 0;
    bottom: clamp(1.5rem, 3vw, 3rem);
    left: 0;
    display: flex;
    justify-content: flex-end;
  }
}

/* Phones and tablets: photo on top, the sand panel full width directly beneath */
@media (max-width: 899px) {
  .banner__media img {
    height: auto;
    aspect-ratio: 3 / 2;
    object-position: 52% 50%;
  }

  .banner__overlay {
    padding-inline: 0;
  }

  .banner__panel {
    max-width: none;
    padding-inline: var(--gutter);
  }
}

/* On one site: amenity grid (2 x 3, hairline rows, no icons) and a photo slideshow */
.onsite__text {
  align-self: center;
}

.amenities {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--gutter);
  margin-top: var(--space-3);
  border-top: 1px solid var(--line);
}

.amenities li {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding-block: 0.85rem;
  border-bottom: 1px solid var(--line);
}

.amenities__name {
  color: var(--green);
  font-weight: var(--weight-heading);
}

.amenities__detail {
  color: var(--ink-muted);
  font-size: var(--text-sm);
}

@media (max-width: 559px) {
  .amenities {
    grid-template-columns: 1fr;
  }
}

/* Names-only list (e.g. In Every Room): short items, so two columns on phones too */
@media (max-width: 559px) {
  .amenities--names {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-3);
  }
}

/* Crossfade slideshow: 3:2 on phones, fills the text height on desktop */
.slideshow {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius);
  background: var(--green-deep);
}

@media (min-width: 900px) {
  .slideshow {
    aspect-ratio: auto;
    min-height: 360px;
  }
}

.slideshow__slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
}

.slideshow__slide.is-active {
  opacity: 1;
}

.slideshow__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slideshow__pause {
  position: absolute;
  right: var(--space-2);
  bottom: var(--space-2);
}

.slideshow__pause:focus-visible {
  outline-color: var(--white);
}

/* ==========================================================================
   15. Security and the brand promise
   ========================================================================== */

/* Desktop: the aerial photo fills its column to match the text height */
@media (min-width: 900px) {
  .media--fill {
    position: relative;
    min-height: 320px;
  }

  .media--fill img {
    position: absolute;
    inset: 0;
    height: 100%;
    aspect-ratio: auto;
  }

  .security__text {
    align-self: center;
  }
}

/* Four assurances: icon in a hairline ring, bold label, short line beneath */
.assurances {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3) var(--space-2);
  margin-top: var(--space-4);
}

.assurances li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  text-align: center;
  font-size: var(--text-sm);
  line-height: 1.4;
}

.assurances__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-1);
  color: var(--green);
}

.assurances__icon svg {
  width: 32px;
  height: 32px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.assurances strong {
  color: var(--ink);
  font-weight: var(--weight-heading);
}

.assurances li > span:last-child {
  color: var(--ink-muted);
}

@media (max-width: 1179px) and (min-width: 900px), (max-width: 559px) {
  .assurances {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Closing strip: full width, centred, terracotta hairline above */
.promise {
  margin: clamp(2.5rem, 1.5rem + 3vw, 4rem) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--terracotta);
  max-width: none;
  text-align: center;
  color: var(--green);
  font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.25rem);
  font-weight: var(--weight-heading);
  line-height: 1.25;
  letter-spacing: -0.01em;
}

/* ==========================================================================
   16. Location: map
   ========================================================================== */

.location__note {
  margin-top: var(--space-2);
}

.map {
  position: relative;
  aspect-ratio: 3 / 2;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 599px) {
  .map {
    aspect-ratio: 4 / 5;
  }
}

/* ==========================================================================
   17. Closing call to action: photo banner with a green tint and inset keyline
   ========================================================================== */

.cta-banner {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(420px, 38vw, 600px);
  overflow: hidden;
  background: var(--green-deep);
  color: var(--white);
  /* Crisp terracotta rule: marks where the banner ends and the footer begins */
  border-bottom: 2px solid var(--terracotta);
}

/* Layers: photo (0), tint and keyline (1), content (2) */
.cta-banner__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Green tint only where the text sits: strong on the left, fading to light
   so the right of the photo keeps its natural sea and sky colour */
.cta-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to right,
    color-mix(in srgb, var(--green-deep) 70%, transparent) 0%,
    color-mix(in srgb, var(--green-deep) 58%, transparent) 38%,
    color-mix(in srgb, var(--green-deep) 25%, transparent) 70%,
    color-mix(in srgb, var(--green-deep) 15%, transparent) 100%);
}

/* Phones: the text runs the full width, so the tint fades top to bottom instead,
   staying stronger through the text and lighter at the very bottom */
@media (max-width: 599px) {
  .cta-banner::before {
    background: linear-gradient(to bottom,
      color-mix(in srgb, var(--green-deep) 68%, transparent) 0%,
      color-mix(in srgb, var(--green-deep) 55%, transparent) 75%,
      color-mix(in srgb, var(--green-deep) 25%, transparent) 100%);
  }
}

/* 1px inset keyline frame */
.cta-banner::after {
  content: "";
  position: absolute;
  inset: 20px;
  z-index: 1;
  border: 1px solid color-mix(in srgb, var(--white) 55%, transparent);
  pointer-events: none;
}

.cta-banner__content {
  position: relative;
  z-index: 2;
  padding-block: clamp(3.5rem, 2.5rem + 3vw, 5rem);
  text-shadow: 0 1px 12px color-mix(in srgb, var(--green-deep) 70%, transparent);
}

.cta-banner h2 {
  color: var(--white);
}

.cta-banner__sub {
  font-size: var(--text-lg);
  font-weight: var(--weight-label);
}

.cta-banner .actions {
  margin-top: var(--space-3);
}

.cta-banner .btn {
  text-shadow: none;
}

.cta-contacts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  margin-top: var(--space-4);
}

.cta-contacts a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--white);
  text-decoration: none;
}

.cta-contacts__icon {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
}

/* The one exception to the line icons: WhatsApp's own glyph and colour */
.cta-contacts__icon--whatsapp {
  fill: var(--whatsapp);
}

.cta-contacts a > span {
  display: flex;
  flex-direction: column;
}

.cta-contacts__label {
  font-size: 0.75rem;
  font-weight: var(--weight-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.cta-contacts__value {
  font-weight: var(--weight-label);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--white) 50%, transparent);
  text-underline-offset: 0.3em;
  overflow-wrap: anywhere;
}

.cta-contacts a:hover .cta-contacts__value {
  text-decoration-color: var(--white);
}

@media (max-width: 599px) {
  .cta-banner::after {
    inset: 10px;
  }

  .cta-banner__content {
    padding-inline: calc(var(--gutter) + 10px);
  }

  .cta-contacts {
    flex-direction: column;
  }
}

/* ==========================================================================
   18. Footer
   ========================================================================== */

.site-footer {
  background: var(--green-deep);
  color: var(--white);
  font-size: 0.9375rem;
}

.site-footer a {
  color: var(--white);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--white) 45%, transparent);
  text-underline-offset: 0.3em;
}

.site-footer a:hover {
  text-decoration-color: var(--white);
}

.site-footer__main {
  display: grid;
  grid-template-columns: 1.4fr 0.9fr 1.5fr;
  align-items: start;
  gap: var(--space-5) var(--gutter);
  padding-block: clamp(3.5rem, 2.5rem + 3vw, 5.5rem);
}

.site-footer__brand img {
  width: var(--logo-min-header);
}

.site-footer__group {
  margin: var(--space-3) 0 var(--space-1);
  font-size: 0.6875rem;
}

.site-footer__bio {
  max-width: 38ch;
  margin: var(--space-2) 0 0;
  color: color-mix(in srgb, var(--white) 85%, transparent);
  line-height: 1.6;
}

/* Contact column: one small white line icon per row; WhatsApp uses its own glyph */
.footer-contact li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.footer-contact li + li {
  margin-top: 0.85rem;
}

.footer-contact__icon {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 0.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.footer-contact__icon--whatsapp {
  fill: var(--whatsapp);
  stroke: none;
}

.footer-contact a {
  overflow-wrap: anywhere;
}

.footer-contact__directions {
  display: inline-block;
  margin-top: 0.35rem;
  font-size: var(--text-sm);
}

.site-footer__sep {
  margin-inline: 0.6em;
}

.site-footer h2 {
  margin-bottom: var(--space-2);
  color: var(--white);
  font-size: 0.75rem;
  font-weight: var(--weight-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.site-footer__col p {
  margin-bottom: var(--space-1);
}

.site-footer__links li + li {
  margin-top: 0.35rem;
}

.socials {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: var(--space-3);
  margin-left: -10px;
}

.socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
}

.socials svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-1) var(--space-4);
  padding-block: var(--space-3);
  border-top: 1px solid var(--terracotta);
  font-size: var(--text-sm);
}

.site-footer__legal p {
  margin: 0;
}

@media (max-width: 1023px) {
  .site-footer__main {
    grid-template-columns: 1fr 1.4fr;
  }

  .site-footer__brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 559px) {
  .site-footer__main {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   19. Mobile action bar: Call, WhatsApp, Book
   ========================================================================== */

.action-bar {
  display: none;
}

@media (max-width: 759px) {
  .action-bar {
    position: fixed;
    inset: auto 0 0;
    z-index: 40;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--white);
    border-top: 1px solid var(--line);
  }

  .action-bar a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    color: var(--green);
    font-size: 0.9375rem;
    font-weight: var(--weight-label);
    text-decoration: none;
  }

  .action-bar a + a {
    border-left: 1px solid var(--line);
  }

  .action-bar a.action-bar__book {
    background: var(--green);
    border-left-color: var(--green);
    color: var(--white);
  }

  .action-bar :focus-visible {
    outline-offset: -4px;
  }

  .action-bar a.action-bar__book:focus-visible {
    outline-color: var(--white);
  }

  body {
    padding-bottom: calc(57px + env(safe-area-inset-bottom));
  }
}

/* ==========================================================================
   20. Reduced motion: still hero, no transitions
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    scroll-behavior: auto !important;
  }

  .hero__pause,
  .slideshow__pause {
    display: none;
  }
}

/* ==========================================================================
   21. Inner pages
   Built only from the home components. These rules adjust them for inner pages.
   ========================================================================== */

/* Same top gradient as the home hero: a fixed band, so the shorter page hero
   gives the white logo and menu the same backing as home */
.hero--page .hero__media::before {
  background:
    linear-gradient(to bottom, color-mix(in srgb, var(--green-deep) 60%, transparent), transparent 240px),
    linear-gradient(to right, color-mix(in srgb, var(--green-deep) 45%, transparent), transparent 60%);
}

/* Three equal columns (e.g. Events lists) */
@media (min-width: 900px) {
  .col-1-4 { grid-column: 1 / 5; }
  .col-5-8 { grid-column: 5 / 9; }
  .col-9-12 { grid-column: 9 / 13; }
}

/* Lists side by side in one section: a little more air between columns */
.row--lists {
  row-gap: var(--space-5);
}

@media (min-width: 900px) {
  .row--lists {
    column-gap: clamp(2.5rem, 4vw, 4.5rem);
  }
}

/* Small heading over a list or fact column */
.list-title {
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  line-height: 1.25;
}

.list-title + .amenities,
.list-title + .facts {
  margin-top: 0;
}

/* Plain single-item lists: ink, Medium. Green stays for name-and-line grids */
.amenities--names .amenities__name {
  color: var(--ink);
  font-weight: var(--weight-label);
}

@media (min-width: 560px) {
  .amenities--single {
    grid-template-columns: 1fr;
  }
}

.list-note {
  margin: var(--space-2) 0 0;
}

/* Centred sections: buttons and the route line sit centred too */
.section--centre .actions {
  justify-content: center;
}

.section--centre .route {
  margin-inline: auto;
  text-align: left;
}

.section--centre .section-head--stacked p {
  margin-inline: auto;
}

/* Contact methods on a light background: green line icons, WhatsApp's own glyph */
.contact-list {
  margin-top: var(--space-3);
}

.contact-list li {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.contact-list li + li {
  margin-top: var(--space-2);
}

.contact-list__icon {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  fill: none;
  stroke: var(--green);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.contact-list__icon--whatsapp {
  fill: var(--whatsapp);
  stroke: none;
}

.contact-list a {
  font-size: var(--text-lg);
  font-weight: var(--weight-label);
  overflow-wrap: anywhere;
}

.contact-list + .facts {
  margin-top: var(--space-4);
}

.contact-address {
  margin-bottom: var(--space-3);
}

.contact-address + .actions {
  margin-top: 0;
  margin-bottom: var(--space-4);
}

/* Pages without a photo hero: page title block */
.page-head h1 {
  font-size: clamp(2rem, 1.1rem + 3vw, 3.5rem);
  line-height: 1.08;
  margin-bottom: var(--space-2);
}

.page-head p {
  margin-bottom: 0;
}

/* Book: three ways to reach reservations, side by side (stacked on phones) */
.options {
  display: grid;
  gap: var(--space-3);
  margin-top: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}

@media (min-width: 760px) {
  .options {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gutter);
  }
}

.options li {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-4) var(--space-3);
  background: var(--sand);
  border-radius: var(--radius);
  text-align: center;
}

.options__icon {
  width: 32px;
  height: 32px;
  margin-bottom: var(--space-2);
  fill: none;
  stroke: var(--green);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.options__icon--whatsapp {
  fill: var(--whatsapp);
  stroke: none;
}

.options h2,
.options h3 {
  margin-bottom: 0.25rem;
}

.options p {
  margin-bottom: 0;
  color: var(--ink-muted);
  overflow-wrap: anywhere;
}

.options .actions {
  margin-top: auto;
  padding-top: var(--space-3);
}

/* Privacy policy: plain reading column */
.prose {
  max-width: 44rem;
  margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
}

.prose h2 {
  margin-top: var(--space-5);
}

.prose h2:first-child {
  margin-top: 0;
}

@media (max-width: 459px) {
  .contact-list a {
    font-size: var(--text-base);
  }
}

/* Slim sections: a short strip or a single centred statement */
.section--slim {
  padding-block: clamp(2.5rem, 1.75rem + 2.5vw, 4rem);
}

/* Two short facts side by side, each with a small label above its value */
.strip {
  margin: 0;
  row-gap: var(--space-3);
}

.strip dt {
  margin-bottom: 0.35rem;
  color: var(--green);
}

.strip dd {
  margin: 0;
}

/* About: Hargeisa's TripAdvisor certificates, centred */
.awards {
  max-width: 520px;
  margin: var(--space-4) auto 0;
}

.awards img {
  width: 100%;
}

/* Contact: social icons on a light background */
.follow-title {
  margin: var(--space-4) 0 0;
  font-size: var(--text-base);
  font-weight: var(--weight-heading);
}

.socials--light {
  margin-top: var(--space-1);
}

.socials--light a {
  color: var(--green);
}

.socials--light a:hover {
  color: var(--green-deep);
}

.contact-facts {
  margin-top: var(--space-4);
}

/* ==========================================================================
   22. Tap targets: at least 44px for touch
   Small text links get an invisible hit area around them, so nothing moves.
   On phones the footer lists also get 44px rows.
   ========================================================================== */

.site-nav__list a,
.link--cta,
.stay-card h3 a,
.contact-list a,
.footer-contact a,
.site-footer__links a {
  position: relative;
}

.site-nav__list a::after,
.link--cta::after,
.stay-card h3 a::after,
.contact-list a::after,
.footer-contact a::after,
.site-footer__links a::after {
  content: "";
  position: absolute;
  inset: -10px -4px;
}

.hero__pause::after,
.slideshow__pause::after {
  content: "";
  position: absolute;
  inset: -3px;
}

@media (max-width: 759px) {
  .site-footer__links li + li {
    margin-top: 0;
  }

  .site-footer__links a {
    display: inline-block;
    padding-block: 12px;
  }

  .site-footer__links a::after {
    inset: 0 -4px;
  }

  .footer-contact li + li {
    margin-top: 1.25rem;
  }
}

.footer-contact a.footer-contact__directions::after {
  inset: -11px -4px;
}

@media (min-width: 760px) {
  .site-footer__links a::after {
    inset: -13px -4px;
  }
}

/* ==========================================================================
   23. Galleries
   .gallery-3: three square photos in a row (mosque, en-suite rooms).
   .gallery-2: two photos per row, 3:2 (Rooms 2x2 grids, Recent Events 2x2).
   Markup: div.gallery-3 > figure.media.ratio-1x1 > img (mosque only now)
   One column on phones; the standard grid gap between photos.
   ========================================================================== */

.gallery-3,
.gallery-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gutter);
}

.gallery-3 img,
.gallery-2 img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: var(--radius);
}

@media (min-width: 600px) {
  .gallery-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gallery-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Six-photo grid (Dining): three across on desktop, two on tablets, one on phones */
.gallery-tiles {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gutter);
}

.gallery-tiles img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: var(--radius);
}

@media (min-width: 600px) {
  .gallery-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  .gallery-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ==========================================================================
   24. Booking engine, Book page and phone fixes (13 October)
   ========================================================================== */

/* Elements switched off by assets/js/main.js (Book page online/offline copy) */
[hidden] {
  display: none !important;
}

/* Book page: the WhatsApp, call and email options under "Book Online" */
.book-alt {
  margin: clamp(2.5rem, 2rem + 2vw, 3.5rem) 0 0;
}

.book-alt + .options {
  margin-top: var(--space-3);
}

/* Space below any gallery that has more content after it in the same section
   (e.g. Events: ballroom photos, then Layouts / Equipment / Occasions).
   About 32px on phones, 48px on tablets, 64px on desktop. A gallery that ends
   its section gets nothing extra, so the section padding is never doubled. */
.gallery-2:not(:last-child),
.gallery-3:not(:last-child),
.gallery-tiles:not(:last-child) {
  margin-bottom: var(--space-4);
}

@media (min-width: 600px) {
  .gallery-2:not(:last-child),
  .gallery-3:not(:last-child),
  .gallery-tiles:not(:last-child) {
    margin-bottom: var(--space-5);
  }
}

@media (min-width: 900px) {
  .gallery-2:not(:last-child),
  .gallery-3:not(:last-child),
  .gallery-tiles:not(:last-child) {
    margin-bottom: calc(2 * var(--space-4));
  }
}

/* Home hero on phones and tablets: grow with its content instead of a fixed
   height. On narrow screens the credentials strip wraps to two rows; with a
   fixed height it spilled out of the hero and covered the booking bar's
   Arrival field. Desktop (900px and up) is unchanged. */
@media (max-width: 899px) {
  .hero:not(.hero--page) {
    height: auto;
    min-height: max(560px, 85vh);
    min-height: max(560px, 85svh);
    max-height: none;
  }

  /* Booking bar date fields: never wider than their column (iOS Safari gives
     date inputs a wide built-in minimum width), left-aligned value, full height */
  .booking__form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .booking__form input[type="date"] {
    display: block;
    min-width: 0;
    max-width: 100%;
    min-height: 50px;
    line-height: 1.2;
    text-align: left;
  }

  .booking__form input[type="date"]::-webkit-date-and-time-value {
    margin: 0;
    text-align: left;
  }
}

@media (max-width: 459px) {
  .booking__form {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Very narrow phones (under 360px): the 280px logo plus the menu button no
   longer fit, so the logo shrinks just enough to keep the button on screen */
@media (max-width: 359px) {
  .site-header__logo img {
    width: calc(100vw - 2 * var(--gutter) - 46px);
  }
}

/* Long addresses (booking.ambassadorhotelberbera.com, the email) may wrap on
   very narrow phones instead of pushing the page sideways */
.prose p {
  overflow-wrap: break-word;
}