/* Scenery: textured walls behind photographs, the guide's limewash idea (owner's Milos Cove
   reference) carried to the other pages, each in its own colour of the island:
   - rooms, opening photograph: clay-red tuff, rising from the left edge;
   - rooms, at a glance: cream tuff, warm like the courtyard's evening light;
   - each house, the gallery: its own colour from the right edge (cream, sage, limewash, grey);
   - contact, the arrival band: sage tuff instead of a flat colour.
   Tuff colours are the owner's images (textures/tuff-{clay,sage,grey,cream}-1024.webp).
   A panel sits behind its photograph and reaches the page edge; never behind text.
   Tablets (761px and up) as on desktop; phones get shorter walls (rooms) or none where the
   photograph spans the screen (house gallery, atlas). Loaded on every page by abh-global-shell. */

@media (min-width: 761px) {
  /* the sections that hold a wall: their own stacking layer, clipped at the page edge */
  body.abh-rooms-page .rc-open,
  body.abh-rooms-page .rc-close,
  body.abh-house-page .house-gallery {
    position: relative;
    isolation: isolate;
  }
  /* the rooms sections span the page; the house gallery is a centred column, so its wall is
     clipped by <main> at the page edge instead */
  body.abh-rooms-page :is(.rc-open, .rc-close) { overflow-x: clip; }
  body.abh-rooms-page .rc-open__photo,
  body.abh-rooms-page .rc-close__plate,
  body.abh-house-page .house-gallery__figure {
    position: relative;
  }
  body.abh-rooms-page .rc-open__photo::after,
  body.abh-rooms-page .rc-close__plate::after,
  body.abh-house-page .house-gallery__figure::after {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
  }

  /* rooms, the opening: warm tuff, above the photograph and behind its left part */
  body.abh-rooms-page .rc-open__photo::after {
    top: -96px;
    bottom: 24%;
    left: -100vw;
    right: 40%;
    background: url("../character/textures/tuff-clay-1024.webp") center / 760px;
  }

  /* rooms, at a glance: cream tuff above and behind the courtyard (the wave moved to the
     guide's sea chapter, owner 2026-10-16) */
  body.abh-rooms-page .rc-close__plate::after {
    top: -96px;
    bottom: 46%;
    left: -100vw;
    right: 30%;
    background: url("../character/textures/tuff-cream-1024.webp") center / 760px;
  }

  /* each house: its own wall rising from the right edge behind the gallery */
  body.abh-house-page .house-gallery__figure::after {
    top: -48px;
    bottom: 32%;
    left: 62%;
    right: -100vw;
    background: url("../character/textures/limewash-960.webp") center / cover;
  }
  body.abh-house-page[data-house="the-cedar"] .house-gallery__figure::after { background: url("../character/textures/tuff-cream-1024.webp") center / 760px; }
  body.abh-house-page[data-house="the-olive-tree"] .house-gallery__figure::after { background: url("../character/textures/tuff-sage-1024.webp") center / 760px; }
  body.abh-house-page[data-house="unique-sea-view"] .house-gallery__figure::after { background: url("../character/textures/tuff-grey-1024.webp") center / 760px; }


}

/* contact: the arrival band (Find us in Mandrakia) in sage tuff, at every width */
body:is(.page-id-341, .page-id-2384) .arrival-band {
  background: url("../character/textures/tuff-sage-1024.webp") center / 760px !important;
}

/* homepage, the Living Atlas: a patch of black volcanic stone behind the chart, rising above it
   and running to the right edge. It travels with the sticky chart and is consumed as the reader
   moves through the chapters: whole at 01, gone by 05 (--abh-atlas-p, 0 to 1, set by
   abh-global-shell.js). Tablets and desktop. */
@media (min-width: 761px) {
  .abh-atlas { overflow-x: clip; }
  .abh-atlas .abh-atlas__visual::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -72px;
    bottom: 30%;
    left: 44%;
    /* to the page edge exactly (the atlas sits on a centred 1280px measure), so that consuming
       it reads across the whole visible patch */
    right: calc(-1 * max(40px, (100vw - 1280px) / 2));
    background:
      linear-gradient(rgba(24, 20, 16, .28), rgba(24, 20, 16, .28)),
      url("../character/textures/volcanic-1024.webp") center / 640px,
      rgb(24, 20, 16);
    clip-path: inset(0 0 calc(var(--abh-atlas-p, 0) * 100%) calc(var(--abh-atlas-p, 0) * 100%));
    transition: clip-path .5s cubic-bezier(.2, .7, .2, 1);
    pointer-events: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .abh-atlas .abh-atlas__visual::before { transition: none; }
}

/* phones: the rooms walls, shorter, above and beside the photograph */
@media (max-width: 760px) {
  body.abh-rooms-page :is(.rc-open, .rc-close) { position: relative; isolation: isolate; overflow-x: clip; }
  body.abh-rooms-page :is(.rc-open__photo, .rc-close__plate) { position: relative; }
  body.abh-rooms-page :is(.rc-open__photo, .rc-close__plate)::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: -36px;
    bottom: 45%;
    left: -100vw;
    right: 36%;
    pointer-events: none;
  }
  body.abh-rooms-page .rc-open__photo::after { background: url("../character/textures/tuff-clay-1024.webp") center / 520px; }
  body.abh-rooms-page .rc-close__plate::after { background: url("../character/textures/tuff-cream-1024.webp") center / 520px; }
}