/* American Camino Outfitters - home page, version D: cut-out collage.
   (C) 2026 interGen. GPL v2 or later.
   Loaded only by the aco-* mod_custom layouts, after collage.css (shared building blocks).
   Adapted from the approved reference (dev-img/reference/Collage/css/home-cutout.css) for
   Cassiopeia's markup: there is no .d-page wrapper, so the paper ground and horizontal
   clipping hang off body:has(.d-hero) instead. */

/* ---------- Page frame (the paper ground itself is in collage.css) ---------- */
/* Clip the arcs sideways here, not on body (body overflow propagates to the viewport and stays pannable).
   overflow-x: clip keeps y visible so the navy arc can still run into Our Story and the gold one up under the header. */
body:has(.d-hero) .site-grid { overflow-x: clip; }
body:has(.d-hero) .container-header { z-index: 10; } /* position: sticky comes from user.css (headroom) */
.container-banner:has(.d-hero) { margin: 0; }
.container-top-a:has(.d-story) { display: block; max-width: none; }
/* The home menu item is the (empty) featured view; drop its strip unless it has articles or a system message */
.container-component:has(> main > .blog-featured):not(:has(.blog-featured *, joomla-alert)) { display: none; }

.d-hero, .d-story { position: relative; }
.d-hero .container, .d-story .container { position: relative; z-index: 2; }
/* Cassiopeia builds Bootstrap with a 1em gutter; the design uses stock 1.5rem. Rows with a g-* class keep theirs. */
.d-hero .container, .d-hero .row, .d-story .container { --gutter-x: 1.5rem; }

.arc { position: absolute; border-radius: 50%; z-index: 0; }

/* ---------- Hero ---------- */
/* Arc offsets are the reference's, shifted for the hero starting below the header instead of above it. */
.arc-gold { width: 900px; height: 900px; right: -260px; top: -690px; }
.arc-navy { width: 700px; height: 700px; left: -380px; bottom: -520px; }
.d-hero { padding: 40px 0 150px; }
.d-hero h1 { font-size: clamp(2.75rem, 5.4vw, 5.1rem); margin: 18px 0 32px; }
.d-hero-text > :last-child { margin-bottom: 0; }
.hero-stage { position: relative; height: 660px; }
.hero-sq { position: absolute; left: 70px; top: 150px; width: 380px; height: 380px; transform: rotate(14deg); }
.hero-dots { left: 360px; top: 470px; width: 154px; height: 110px; transform: rotate(14deg); }
.hero-hiker { position: absolute; z-index: 2; left: 150px; top: 0; height: 660px; width: auto; }
/* Default hero: framed landscape photo laid over the navy square */
.hero-photo { position: absolute; z-index: 3; left: -10px; top: 180px; width: 560px; max-width: calc(100% - 20px); height: auto; border: 10px solid #fff; box-shadow: 0 14px 30px rgba(20, 37, 66, .3); }
.hero-stamp { position: absolute; z-index: 4; left: 430px; top: 80px; width: 140px; transform: rotate(12deg); mix-blend-mode: multiply; opacity: .88; }
.hero-shell { position: absolute; z-index: 1; left: 20px; top: 70px; width: 58px; height: auto; transform: rotate(-12deg); }
.hero-trail { left: 0; bottom: 0; width: 100%; height: auto; }

/* ---------- Our Story ---------- */
.d-story { padding: 60px 0 120px; }
.story-stage { position: relative; display: block; width: 100%; height: 560px; padding: 0; border: 0; background: none; text-align: left; text-decoration: none; cursor: default; }
button.story-stage { cursor: pointer; }
.story-stage:focus-visible { outline: 3px solid #1e355d; outline-offset: 6px; }
.story-sq { position: absolute; left: 50px; top: 110px; width: 440px; height: 390px; transform: rotate(-9deg); }
.story-frost { position: absolute; left: 300px; top: 40px; width: 250px; height: 250px; border-radius: 50%; }
.story-group { position: absolute; z-index: 2; left: 10px; top: 30px; width: 540px; max-width: 100%; height: auto; }
.story-play { position: absolute; z-index: 3; left: 420px; top: 380px; width: 104px; height: 104px; border-radius: 50%; background: #b2292e; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 24px rgba(20, 37, 66, .35); transition: transform .2s ease, background .2s ease; }
.story-stage:hover .story-play, .story-stage:focus-visible .story-play { background: #8e1f23; transform: scale(1.06); }
.story-note { position: absolute; z-index: 3; left: 300px; top: 500px; color: #b2292e; font-size: 1.35rem; transform: rotate(-4deg); white-space: nowrap; }
.d-story .pin-card { transform: rotate(-1.2deg); margin-top: 60px; }
.d-story .pin-card h2 { font-size: clamp(2.25rem, 4vw, 3.25rem); }
.aco-video-modal .modal-content { background: #142542; color: #fff; border: 0; overflow: hidden; }
.aco-video-modal .modal-header { border-bottom: 0; }
.aco-video-modal .modal-title { color: #fff; }
.aco-video-modal .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }

/* ---------- Upcoming pilgrimages: pinned to the wall, shelf below (mod_grid_card "pilgramages") ---------- */
/* Full-bleed: Cassiopeia's top-b grid area spans only the centre columns, and it gives children a .5em margin */
.site-grid > .container-top-b:has(.d-tours) { display: block; grid-column: full-start / full-end; }
.container-top-b > .d-tours, .container-top-b > :has(> .d-tours) { margin: 0; }
/* The wall prints its own heading; drop the module chrome's title if a style other than None is chosen */
.container-top-b > :has(> .d-tours) > :is(h1, h2, h3, h4, h5, h6) { display: none; }
.d-tours { position: relative; padding: 110px 0 0; background: #ebe2cf url(../images/textures/paper.jpg); background-blend-mode: multiply; }
.d-tours.no-bg {
  padding-block:50px;
  background:transparent none;
  .shelf-row {
    display:none;
  }
  .shelf {
    display:none;
  }
}
.moduletable.pilgramages.no-bg h3:first-child{
  display:none;
}
.d-tours .container { position: relative; z-index: 2; --gutter-x: 1.5rem; }
.d-tours h2 { font-size: clamp(2.25rem, 4.4vw, 3.75rem); }
.tours-note { color: #8e1f23; font-size: 1.35rem; transform: rotate(-2deg); }
.pin-tour { position: relative; height: 100%; display: flex; flex-direction: column; background: #fffdf8; padding: 36px 18px 20px; box-shadow: 0 12px 22px rgba(20, 37, 66, .18); transform: rotate(var(--rot)) translateY(var(--y)); }
.pin-tour .tack { left: 50%; margin-left: -8px; }
/* Hover: the card swings on its pin (tack centre = 22px down) left, right and settles.
   pin-swing.js adds .is-swinging on mouseenter and removes it when the swing ends.
   Uses the separate rotate property, so it adds to the card's own tilt in transform. */
.pin-tour { transform-origin: 50% 22px; }
.pin-tour h3.h4 {
  text-wrap:balance;
}
.pin-tour.is-swinging { animation: pin-swing 1.4s cubic-bezier(.36, .07, .19, .97); }
@keyframes pin-swing {
  0% { rotate: 0deg; }
  15% { rotate: 2.6deg; }
  32% { rotate: -2.1deg; }
  50% { rotate: 1.3deg; }
  66% { rotate: -.7deg; }
  82% { rotate: .3deg; }
  100% { rotate: 0deg; }
}
.pin-tour img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; margin-bottom: 14px; }
.pin-tour .h4 { color: #1e355d; }
.pin-tour__link { color: inherit; text-decoration: none; }
.pin-tour__link:hover, .pin-tour__link:focus-visible { color: #b2292e; text-decoration: underline; }
.pin-tour .aco-price { font-family: var(--aco-font-display); font-size: 1.75rem; font-weight: 700; line-height: 1; color: #1e355d; }
.p1 { --rot: -1.6deg; --y: 0px; } .p2 { --rot: 1.2deg; --y: 26px; } .p3 { --rot: -.6deg; --y: 8px; } .p4 { --rot: 1.8deg; --y: 34px; }
.shelf-row { position: relative; margin-top: 96px;margin-bottom: 50px; }
.shelf-items { position: relative; z-index: 2; display: flex; align-items: flex-end; justify-content: center; gap: 40px; height: 120px; }
.shelf-badge { width: 104px; height: auto; transform: rotate(-8deg); filter: drop-shadow(0 6px 6px rgba(20, 37, 66, .25)); }
.shelf-sign { position: relative; padding: 14px 26px 12px; transform: rotate(2deg); }
.shelf-sign .d-h { font-size: 1.5rem; }
.shelf-sign:hover .d-h, .shelf-sign:focus-visible .d-h { text-decoration: underline; text-decoration-thickness: 2px; }
.shelf-shell { width: 64px; height: auto; filter: drop-shadow(0 6px 6px rgba(20, 37, 66, .2)); }
@media (max-width: 991.98px) {
  .d-hero { padding: 24px 0 80px; }
  .arc-gold { width: 520px; height: 520px; right: -240px; top: -400px; }
  .arc-navy { width: 360px; height: 360px; left: -230px; bottom: -240px; }
  .hero-stage { height: 500px; max-width: 420px; margin: 24px auto 0; }
  .hero-sq { left: 40px; top: 120px; width: 280px; height: 280px; }
  .hero-dots { left: 240px; top: 350px; }
  .hero-hiker { left: 110px; height: 500px; }
  /* The landscape photo needs far less height than the tall cut-out: pull the stage in around it */
  .hero-stage:has(.hero-photo) { height: 380px; }
  .hero-stage:has(.hero-photo) .hero-sq { top: 60px; }
  .hero-stage:has(.hero-photo) .hero-dots { top: 270px; }
  .hero-stage:has(.hero-photo) .hero-shell { top: 0; }
  .hero-photo { left: 10px; top: 90px; }
  .hero-stamp, .hero-trail, .story-note { display: none; }
  .hero-shell { left: 0; top: 40px; }
  .story-stage { height: auto; padding: 30px 0 40px; }
  .story-sq { left: 6%; top: 60px; width: 84%; height: 70%; }
  .story-frost { display: none; }
  .story-group { position: relative; left: auto; top: auto; width: 100%; }
  .story-play { left: auto; right: 8%; top: auto; bottom: 16px; width: 84px; height: 84px; }
  .d-story .pin-card { transform: none; margin-top: 0; }
  .pin-tour { transform: none; }
  .shelf-items { gap: 20px; }
}

@media (max-width: 575.98px) {
  .shelf-badge, .shelf-shell { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .story-play { transition: none; }
  .story-stage:hover .story-play, .story-stage:focus-visible .story-play { transform: none; }
}