/* Yorkshire Outdoor Activity Park: inner-page components. Loads after yoap.css. */

/* Page hero: same language as the homepage hero, shorter */
.y-phero { position: relative; margin: 8px 8px 0; min-height: 640px; border-radius: 28px; overflow: hidden; color: #FFFFFF; display: flex; flex-direction: column; }
.y-phero--short { min-height: 520px; }
.y-phero__media, .y-phero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.y-phero__shade { position: absolute; inset: 0; background: rgba(13, 43, 30, 0.52); }
.y-phero__inner { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 22px; padding: 130px 18px 52px; }
.y-phero__copy { display: flex; flex-direction: column; gap: 16px; max-width: 820px; }
.y-phero .y-h1 { font-size: clamp(48px, 7.4vw, 104px); }
.y-crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, 0.8); }
.y-crumbs a { color: #FFFFFF; text-decoration: none; }
.y-crumbs span[aria-hidden] { opacity: 0.6; }
.y-facts { display: flex; flex-wrap: wrap; gap: 8px; }
.y-facts .y-chip { background: rgba(255, 255, 255, 0.16); color: #FFFFFF; height: 38px; padding: 0 16px; font-size: 15px; }
.y-facts .y-chip--splat { background: var(--splat); color: var(--ink); font-weight: 700; }
@media (min-width: 768px) {
  .y-phero { margin: 12px 12px 0; border-radius: var(--radius-lg); min-height: 700px; }
  .y-phero--short { min-height: 560px; }
  .y-phero__inner { padding: 160px 40px 48px; }
}
@media (min-width: 1100px) {
  .y-phero__inner { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 40px; }
}

/* In-page section nav */
.y-subnav { position: sticky; top: 0; z-index: 30; background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.y-subnav .y-wrap { display: flex; align-items: center; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-top: 10px; padding-bottom: 10px; }
.y-subnav a { flex-shrink: 0; min-height: 40px; padding: 0 16px; display: inline-flex; align-items: center; border-radius: 999px; font-size: 15px; font-weight: 600; text-decoration: none; color: var(--ink); }
.y-subnav a[aria-current] { background: var(--surface); }
.y-subnav .y-btn { margin-left: auto; min-height: 44px; font-size: 15px; }

/* Section heading row */
.y-shead { display: flex; flex-direction: column; gap: 14px; margin-bottom: 28px; max-width: 760px; }
.y-shead--row { max-width: none; }
@media (min-width: 1100px) {
  .y-shead { margin-bottom: 40px; }
  .y-shead--row { flex-direction: row; justify-content: space-between; align-items: flex-end; }
  .y-shead--row > div { max-width: 700px; display: flex; flex-direction: column; gap: 14px; }
}

/* Package / price cards */
.y-pkgs { display: grid; grid-template-columns: 1fr; gap: 16px; }
.y-pkg { position: relative; background: var(--surface); border-radius: 28px; padding: 28px 24px 24px; display: flex; flex-direction: column; gap: 16px; }
.y-pkg--star { background: var(--forest); color: #FFFFFF; }
.y-pkg__tag { position: absolute; right: 20px; top: 20px; background: var(--splat); color: var(--ink); border-radius: 999px; padding: 7px 14px; font-size: 13px; font-weight: 700; }
.y-pkg__name { font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: -0.01em; margin: 0; }
.y-pkg__price { display: flex; align-items: baseline; gap: 8px; }
.y-pkg__price b { font-family: var(--font-display); font-weight: 800; font-size: 72px; line-height: 0.9; letter-spacing: -0.05em; }
.y-pkg__price span { font-size: 16px; color: var(--ink-muted); }
.y-pkg--star .y-pkg__price span, .y-pkg--star p { color: var(--on-forest-muted); }
.y-pkg p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--ink-muted); }
.y-pkg--star p { color: var(--on-forest-muted); }
.y-ticks { list-style: none; margin: 0; padding: 16px 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; font-size: 16px; }
.y-pkg--star .y-ticks { border-color: var(--forest-line); }
.y-ticks li { display: flex; gap: 10px; align-items: flex-start; }
.y-ticks li::before { content: ""; flex-shrink: 0; margin-top: 3px; width: 20px; height: 20px; border-radius: 999px; background: var(--green-deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E") center / 13px no-repeat; }
.y-pkg--star .y-ticks li::before { background-color: var(--splat); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230D2B1E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E"); }
.y-pkg .y-btn { margin-top: auto; }
.y-note { margin-top: 16px; background: var(--surface); border-radius: 22px; padding: 18px 22px; display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 16px; }
.y-note b { font-weight: 700; }
@media (min-width: 900px) { .y-pkgs { grid-template-columns: repeat(3, 1fr); gap: 20px; } .y-pkg { padding: 32px 28px 28px; } }

/* What's included / how it works tiles */
.y-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.y-tile { background: var(--surface); border-radius: 24px; padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.y-tile__icon { width: 48px; height: 48px; border-radius: 16px; background: var(--forest); display: flex; align-items: center; justify-content: center; }
.y-tile__icon svg { width: 24px; height: 24px; }
.y-tile strong { font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: -0.01em; line-height: 1.15; }
.y-tile span { font-size: 15px; line-height: 1.5; color: var(--ink-muted); }
@media (min-width: 900px) { .y-tiles { grid-template-columns: repeat(4, 1fr); gap: 16px; } .y-tile { padding: 24px; } }

/* Game-day timeline strip */
.y-day { margin-top: 16px; display: grid; grid-template-columns: 1fr; gap: 10px; }
.y-day div { background: var(--forest); color: #FFFFFF; border-radius: 22px; padding: 20px 22px; display: flex; flex-direction: column; gap: 4px; }
.y-day b { font-family: var(--font-display); font-weight: 800; font-size: 34px; letter-spacing: -0.03em; color: var(--splat); line-height: 1; }
.y-day span { color: var(--on-forest-muted); font-size: 15px; }
@media (min-width: 768px) { .y-day { grid-template-columns: repeat(4, 1fr); gap: 16px; } }

/* Zones list with photos */
.y-zones { display: grid; grid-template-columns: 1fr; gap: 16px; }
.y-zone { background: var(--surface); border-radius: 28px; overflow: hidden; display: flex; flex-direction: column; }
.y-zone img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.y-zone div { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 8px; }
.y-zone strong { font-family: var(--font-display); font-weight: 800; font-size: 26px; letter-spacing: -0.025em; }
.y-zone em { font-style: normal; align-self: flex-start; background: var(--splat); border-radius: 999px; padding: 5px 12px; font-size: 13px; font-weight: 700; }
.y-zone p { margin: 0; color: var(--ink-muted); font-size: 16px; line-height: 1.55; }
.y-park .y-zone { background: var(--forest-2); }
.y-park .y-zone strong { color: #FFFFFF; }
.y-park .y-zone p { color: var(--on-forest-muted); }
@media (min-width: 900px) { .y-zones { grid-template-columns: repeat(3, 1fr); gap: 20px; } }

/* FAQs */
.y-faq { display: grid; grid-template-columns: 1fr; gap: 28px; }
.y-faq__list { display: flex; flex-direction: column; gap: 10px; }
.y-faq details { background: var(--surface); border-radius: 22px; }
.y-faq summary { list-style: none; cursor: pointer; min-height: 64px; padding: 18px 64px 18px 22px; position: relative; font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: -0.01em; line-height: 1.3; }
.y-faq summary::-webkit-details-marker { display: none; }
.y-faq summary::after { content: ""; position: absolute; right: 18px; top: 50%; width: 32px; height: 32px; margin-top: -16px; border-radius: 999px; background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230D2B1E' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 16px no-repeat; }
.y-faq details[open] summary::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230D2B1E' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E"); }
.y-faq details p { margin: 0; padding: 0 22px 22px; color: var(--ink-muted); line-height: 1.6; }
@media (min-width: 1100px) { .y-faq { grid-template-columns: 400px 1fr; gap: 64px; } }

/* Price tables */
.y-ptables { display: grid; grid-template-columns: 1fr; gap: 16px; }
.y-ptable { background: var(--surface); border-radius: 28px; padding: 8px; }
.y-ptable h3 { font-family: var(--font-display); font-weight: 800; font-size: 26px; letter-spacing: -0.025em; margin: 0; padding: 18px 18px 12px; }
.y-prow { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; align-items: center; background: #FFFFFF; border-radius: 18px; padding: 16px 18px; margin-top: 6px; text-decoration: none; color: var(--ink); }
.y-prow strong { font-weight: 700; font-size: 17px; }
.y-prow small { grid-column: 1; font-size: 14px; color: var(--ink-muted); }
.y-prow b { grid-row: 1 / span 2; grid-column: 2; font-family: var(--font-display); font-weight: 800; font-size: 32px; letter-spacing: -0.03em; }
@media (min-width: 900px) { .y-ptables { grid-template-columns: repeat(3, 1fr); gap: 20px; } }

/* Timeline (The Park) */
.y-timeline { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 16px; }
.y-timeline li { background: var(--surface); border-radius: 28px; padding: 28px; display: flex; flex-direction: column; gap: 10px; }
.y-timeline b { font-family: var(--font-display); font-weight: 800; font-size: 56px; line-height: 0.9; letter-spacing: -0.045em; color: var(--green-deep); }
.y-timeline strong { font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: -0.015em; }
.y-timeline span { color: var(--ink-muted); line-height: 1.55; }
.y-timeline li:first-child { background: var(--forest); color: #FFFFFF; }
.y-timeline li:first-child b { color: var(--splat); }
.y-timeline li:first-child span { color: var(--on-forest-muted); }
@media (min-width: 900px) { .y-timeline { grid-template-columns: repeat(3, 1fr); gap: 20px; } }

/* Split feature (text + image) */
.y-split { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: center; }
.y-split img { border-radius: 28px; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.y-split__copy { display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 1000px) { .y-split { grid-template-columns: 1fr 1fr; gap: 64px; } .y-split--flip .y-split__copy { order: 2; } }

/* Forms (quote + contact) */
.y-formcard { background: #FFFFFF; color: var(--ink); border-radius: 28px; padding: 24px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow-float); }
.y-formcard h3 { font-family: var(--font-display); font-weight: 800; font-size: 28px; letter-spacing: -0.025em; margin: 0 0 4px; }
.y-formgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.y-formgrid .y-field--wide { grid-column: span 2; }
.y-field textarea { border: 0; background: transparent; resize: vertical; min-height: 96px; padding: 0; font: 500 16px/1.4 var(--font-body); color: var(--ink); }
.y-field input::placeholder, .y-field textarea::placeholder { color: #8A988F; font-weight: 500; }
.y-formcard .y-small { font-size: 13px; color: var(--ink-muted); margin: 0; }
@media (min-width: 768px) { .y-formcard { padding: 32px; } }

/* Contact cards */
.y-ccards { display: grid; grid-template-columns: 1fr; gap: 12px; }
.y-ccard { background: var(--surface); border-radius: 26px; padding: 24px; display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: var(--ink); }
.y-ccard .y-tile__icon { background: var(--splat); }
.y-ccard strong { font-family: var(--font-display); font-weight: 800; font-size: 26px; letter-spacing: -0.025em; }
.y-ccard span { color: var(--ink-muted); }
@media (min-width: 900px) { .y-ccards { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.y-map { position: relative; border-radius: 28px; overflow: hidden; min-height: 360px; background: var(--forest); color: #FFFFFF; display: flex; align-items: flex-end; padding: 28px; background-image: radial-gradient(circle at 70% 40%, rgba(255, 198, 26, 0.22) 0 6px, transparent 7px), repeating-linear-gradient(35deg, rgba(255, 255, 255, 0.05) 0 2px, transparent 2px 38px), repeating-linear-gradient(-55deg, rgba(255, 255, 255, 0.05) 0 2px, transparent 2px 54px); }
.y-map__pin { position: absolute; left: 70%; top: 40%; width: 56px; height: 56px; margin: -56px 0 0 -28px; }
.y-map__card { background: #FFFFFF; color: var(--ink); border-radius: 22px; padding: 20px; display: flex; flex-direction: column; gap: 8px; max-width: 380px; }
.y-map__card strong { font-family: var(--font-display); font-weight: 800; font-size: 22px; }
.y-drive { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.y-drive li { background: var(--surface); border-radius: 22px; padding: 18px; display: flex; flex-direction: column; gap: 2px; }
.y-drive b { font-family: var(--font-display); font-weight: 800; font-size: 40px; line-height: 1; letter-spacing: -0.04em; }
.y-drive span { color: var(--ink-muted); font-size: 15px; }

/* Choose-your-activity rows (group pages) */
.y-choices { display: grid; grid-template-columns: 1fr; gap: 16px; }
.y-choice { display: grid; grid-template-columns: 1fr; background: var(--surface); border-radius: 28px; overflow: hidden; text-decoration: none; color: var(--ink); }
.y-choice img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.y-choice__body { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 10px; }
.y-choice__kicker { align-self: flex-start; background: var(--forest); color: #FFFFFF; border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 700; }
.y-choice strong { font-family: var(--font-display); font-weight: 800; font-size: 30px; letter-spacing: -0.03em; line-height: 1; }
.y-choice p { margin: 0; color: var(--ink-muted); line-height: 1.55; }
.y-choice .y-card__chips .y-chip { background: #FFFFFF; }
@media (min-width: 900px) { .y-choices { grid-template-columns: 1fr 1fr; gap: 20px; } .y-choice { grid-template-columns: 44% 1fr; } .y-choice img { height: 100%; aspect-ratio: auto; } }

.y-band { background: var(--forest); color: #FFFFFF; border-radius: 28px; padding: 28px 24px; display: flex; flex-direction: column; gap: 18px; }
.y-band p { margin: 0; color: var(--on-forest-muted); }
@media (min-width: 1000px) { .y-band { flex-direction: row; justify-content: space-between; align-items: center; padding: 40px 48px; border-radius: var(--radius-lg); } }

.y-zone--more { grid-column: span 2; padding: 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-content: start; }
.y-zone--more > div { padding: 0; }
.y-zone--more h3 { grid-column: span 2; margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 20px; color: var(--splat); letter-spacing: -0.01em; }
@media (max-width: 899px) { .y-zone--more { grid-column: auto; grid-template-columns: 1fr; } .y-zone--more h3 { grid-column: auto; } }
.y-section .y-btn--call, .y-faq .y-btn--call { background: var(--surface); }
.y-howto .y-btn--call, .y-cta .y-btn--call, .y-park .y-btn--call, .y-band .y-btn--call, .y-phero .y-btn--call { background: #FFFFFF; }
.y-shead--row .y-tabs { flex-shrink: 0; }
.y-pkg__tag { position: static; align-self: flex-start; margin-bottom: -4px; }