/* shared/experiences.css — homepage "Experiences" tiles (replaces The Ritual cards). */
:where(.p-exp) {
  --p-exp-bg: #1e1a16; --p-exp-text: #fef6ec; --p-exp-highlight: #efd70d;
  --p-exp-rule: rgba(254,246,236,.18); --p-exp-ease: cubic-bezier(.4,0,.2,1);
}
.p-exp { padding: 30px 20px 40px; color: var(--p-exp-text); }
@media (min-width: 768px) { .p-exp { padding: 75px 50px; } }
.p-exp_head { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
@media (min-width: 768px) { .p-exp_head { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 50px; margin-bottom: 40px; } }
.p-exp_titles { display: flex; flex-direction: column; gap: 10px; max-width: 34em; }
.p-exp_titles h2 { margin: 0; }
.p-exp_subtitle { margin: 0; opacity: .55; }
.p-exp_viewall { display: inline-flex; align-items: center; gap: 6px; color: var(--p-exp-highlight); text-transform: uppercase; letter-spacing: .08em; font-weight: 500; font-size: 12px; white-space: nowrap; text-decoration: none; }
.p-exp_viewall:hover { opacity: .75; }

/* Rail: horizontal on phones (same contract as the /book day tabs — proximity
   snapping, overflow-y hidden, never scrollIntoView), grid from tablet up. */
.p-exp_rail { display: flex; gap: 10px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; margin: 0 -20px; padding: 0 20px 6px; scrollbar-width: none; }
.p-exp_rail::-webkit-scrollbar { display: none; }
@media (min-width: 768px) { .p-exp_rail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; overflow: visible; margin: 0; padding: 0; scroll-snap-type: none; } }
@media (min-width: 1180px) { .p-exp_rail { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.p-exp-tile { position: relative; display: block; flex: 0 0 300px; scroll-snap-align: start; height: 460px; border-radius: 10px; overflow: hidden; background: var(--p-exp-bg); color: var(--p-exp-text); text-decoration: none; }
@media (min-width: 768px) { .p-exp-tile { flex: none; height: auto; min-height: 380px; aspect-ratio: 9 / 16; } }
.p-exp-tile_media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; transition: transform .6s var(--p-exp-ease); }
.p-exp-tile:hover .p-exp-tile_media { transform: scale(1.05); }
.p-exp-tile_overlay { position: absolute; inset: 0; z-index: 2; background: linear-gradient(to top, rgba(23,20,17,.88) 0%, rgba(23,20,17,.25) 50%, transparent 100%); }
.p-exp-tile_body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 18px; display: flex; flex-direction: column; gap: 6px; }
@media (min-width: 768px) { .p-exp-tile_body { padding: 20px; gap: 8px; } }
.p-exp-tile_label { margin: 0; color: var(--p-exp-highlight); letter-spacing: .12em; }
.p-exp-tile_name { margin: 0; }
.p-exp-tile_desc { display: none; }
.p-exp-tile_addons { margin: 0; font-size: 12px; opacity: .7; }
.p-exp-tile_addons[hidden] { display: none; }
.p-exp-tile_foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 8px; border-top: 1px solid var(--p-exp-rule); }
.p-exp-tile_meta { font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-exp-tile_go { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex-shrink: 0; border-radius: 100px; border: 1px solid rgba(254,246,236,.35); color: var(--p-exp-highlight); }
.p-exp-tile_go svg { width: 16px; height: 16px; }
.p-exp_cta { margin-top: 30px; }
@media (min-width: 768px) { .p-exp_cta { margin-top: 40px; } }
.p-exp :focus-visible { outline: 2px solid var(--p-exp-highlight); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .p-exp-tile_media { transition: none; } .p-exp-tile:hover .p-exp-tile_media { transform: none; } }