/* American Camino Outfitters - cut-out collage building blocks, shared by the home, tour and inner pages.
   (C) 2026 interGen. GPL v2 or later.
   Loaded as template.cassiopeia_americancamino.collage (a dependency of the home and tour styles). */

/* ---------- Page ground (stands in for the reference's .d-page) ---------- */
body:has(.d-hero),
body:has(.aco-tour),
body:has(.aco-inner) {
  background: #f6f1e7 url(../images/textures/paper.jpg) repeat;
  color: #1b2433;
}

/* ---------- Building blocks ---------- */
.wash-gold { background: #e0a526 url(../images/textures/wash-gold.jpg); }
.wash-navy { background: #1e355d url(../images/textures/wash-navy.jpg); }
.wash-red { background: #b2292e url(../images/textures/wash-red.jpg); }
.wash-frost { background: #e0e5ea url(../images/textures/wash-frost.jpg); }
.hand { font-family: "Kalam", "Comic Neue", cursive; }
.cutout { display: block; filter: drop-shadow(0 14px 12px rgba(20, 37, 66, .22)); }
.dots { position: absolute; background: radial-gradient(circle, #e0a526 3px, transparent 3.6px) 0 0 / 22px 22px; }
.star { position: absolute; width: 16px; height: 16px; fill: #1e355d; z-index: 1; }
.trail { position: absolute; pointer-events: none; z-index: 1; }
.trail path { fill: none; stroke: #1e355d; stroke-width: 2.5; stroke-dasharray: 9 9; stroke-linecap: round; }
.tack { position: absolute; top: 14px; width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ef9a9c 0, #b2292e 50%, #701a1d 100%); box-shadow: 1px 3px 3px rgba(0, 0, 0, .3); z-index: 3; }
.tack.navy { background: radial-gradient(circle at 35% 30%, #8ea6cc 0, #1e355d 50%, #0d1a30 100%); }
.aged { background: #f8f0de url(../images/textures/paper.jpg); background-blend-mode: multiply; box-shadow: 0 12px 24px rgba(20, 37, 66, .16), inset 0 0 48px rgba(150, 115, 60, .16); }
.d-h { font-family: "Barlow Condensed", "Arial Narrow", sans-serif; font-weight: 700; text-transform: uppercase; line-height: .95; color: #1e355d; letter-spacing: .005em; }
.d-h em { font-style: italic; font-weight: 600; color: #b2292e; }
.date-stamp { display: inline-block; align-self: flex-start; border: 2px solid #b2292e; color: #b2292e; padding: 2px 8px; border-radius: 4px; font-family: "Barlow Condensed", sans-serif; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: 14px; transform: rotate(-3deg); margin-bottom: 8px; }
.tag-rule { border: 0; border-top: 2px dashed #cbbd9f; opacity: 1; margin: 12px 0; }

/* Aged paper card with two tacks (Our Story, tour facts) */
.pin-card { position: relative; padding: 56px 44px 40px; }
.pin-card .tack { left: 22px; }
.pin-card .tack + .tack { left: auto; right: 22px; }
.pin-card > :last-child { margin-bottom: 0; }
@media (max-width: 991.98px) { .pin-card { padding: 52px 24px 32px; } }

/* Wooden ledge (under the tours wall, above the footer) */
.shelf { position: relative; z-index: 3; height: 22px; background: linear-gradient(180deg, #d2a46a 0, #b3844d 40%, #87602f 100%); box-shadow: 0 12px 16px rgba(20, 37, 66, .28); }
.shelf::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: rgba(255, 255, 255, .28); }

/* bottom-b runs the full page width. It subgrids Cassiopeia's columns, so ordinary modules stay in the centre
   column and full-bleed sections (newsletter postcard) span edge to edge. */
.site-grid > .container-bottom-b { display: grid; grid-template-columns: subgrid; grid-column: full-start / full-end; max-width: none; padding-inline: 0; }
.container-bottom-b > * { grid-column: main-start / main-end; min-width: 0; }
.container-bottom-b > :is(.d-signup, :has(> .d-signup)) { grid-column: full-start / full-end; }

/* Plain-article sidebar (aco-aside-top / aco-aside-bottom modules, article default.php) */
.aco-plain-body { padding-bottom: 80px; }
.aco-aside { display: flex; flex-direction: column; gap: 40px; }
@media (min-width: 992px) { .aco-aside { position: sticky; top: 2rem; } }

/* Booking button (General Booking Text + URL fields; layout aco.booking, in the inner-page and pilgrimage sidebars): a red-wash ticket with notched
   sides, a perforated inner edge, tilted a little. The shadow sits on the <p>
   because the notch mask would clip a box-shadow on the link. */
.ip-book { margin: 0; filter: drop-shadow(0 12px 14px rgba(20, 37, 66, .28)); }
.ip-book:has(a:focus-visible) { outline: 3px solid #1e355d; outline-offset: 6px; }
.ip-book__ticket { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 30px 34px; color: #fff; text-decoration: none; transform: rotate(1.5deg); transition: transform .2s ease;
  -webkit-mask: radial-gradient(circle 13px at 0 50%, #0000 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle 13px at 100% 50%, #0000 97%, #000) right / 51% 100% no-repeat;
  mask: radial-gradient(circle 13px at 0 50%, #0000 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle 13px at 100% 50%, #0000 97%, #000) right / 51% 100% no-repeat; }
.ip-book__ticket::after { content: ""; position: absolute; inset: 9px 22px; border: 2px dashed rgba(255, 255, 255, .5); pointer-events: none; }
.ip-book__text { font-family: "Barlow Condensed", "Arial Narrow", sans-serif; font-weight: 700; text-transform: uppercase; font-size: 1.75rem; line-height: 1; letter-spacing: .02em; }
.ip-book__ticket svg { flex: 0 0 auto; width: 30px; height: 30px; fill: none; stroke: #e0a526; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; }
.ip-book__ticket:hover, .ip-book__ticket:focus-visible { color: #fff; transform: rotate(0) translateY(-2px); }
.ip-book__ticket:hover svg, .ip-book__ticket:focus-visible svg { transform: translateX(4px); }
.ip-book__ticket:focus-visible { outline: 0; }
@media (prefers-reduced-motion: reduce) { .ip-book__ticket, .ip-book__ticket svg { transition: none; } }
@media (max-width: 991.98px) { .ip-book__ticket { transform: none; } }