/*
 * Park page /parcs/{slug}/ and park article /parcs/{park}/{article} (REDESIGN slice B).
 * Mobile first; tokens and shared components (page head, prose, side cards) in ../app.css.
 */

/* Page head: the park logo on a white plate left of the H1. */
.park-head-logo { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 7.5rem; height: 5.25rem; padding: .5rem; background: #fff; border: 1px solid var(--pa-line); border-radius: 12px; box-shadow: var(--shadow-soft); }
.park-head-logo a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.park-head-logo img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
@media (min-width: 768px) { .park-head-logo { width: 10rem; height: 7rem; padding: .65rem; } }
@media (max-width: 575.98px) {
    .page-park .page-head-row { flex-direction: column; gap: .85rem; }
    .park-head-logo { width: 6.5rem; height: 4.5rem; }
}

/* Sections of the main column */
.park-section + .park-section { margin-top: 2rem; }
.park-latest-deals { margin-bottom: 2.75rem; }

/* Deal cards in the main column (active and expired deals). */
.deal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; }
@media (min-width: 768px) { .deal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; } }
@media (max-width: 379.98px) { .deal-grid { grid-template-columns: minmax(0, 1fr); } }

/* Expired deals: collapsed by default (register R27 on the park pages). */
.expired-deals { background: #fff; border: 1px solid var(--pa-line); border-radius: var(--card-radius); box-shadow: var(--shadow-soft); }
.expired-deals > summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer; list-style: none; padding: 1rem 1.25rem; }
.expired-deals > summary::-webkit-details-marker { display: none; }
.expired-deals-title { display: block; font-size: 1.1rem; font-weight: 800; color: var(--pa-navy); margin: 0; }
.expired-deals-lead { display: block; color: var(--pa-muted); font-size: .9rem; margin-top: .2rem; }
.expired-deals-toggle { flex-shrink: 0; display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; color: var(--pa-muted); background: var(--pa-section); border: 1px solid var(--pa-line); border-radius: 999px; padding: .25rem .7rem; }
.expired-deals-toggle .bi { transition: transform .15s ease; }
.expired-deals[open] .expired-deals-toggle .bi { transform: rotate(180deg); }
.expired-deals > .deal-grid { padding: 0 1.25rem 1.25rem; }
@media (max-width: 575.98px) { .expired-deals > summary { padding: .9rem 1rem; } .expired-deals > .deal-grid { padding: 0 .85rem .9rem; } }

/* Similar articles: thumbnail rows. */
.article-rows { display: grid; gap: .85rem; }
.article-row { position: relative; display: flex; gap: 1rem; align-items: flex-start; background: #fff; border: 1px solid var(--pa-line); border-radius: 12px; box-shadow: var(--shadow-soft); padding: .75rem; transition: box-shadow .18s ease; }
.article-row:hover { box-shadow: var(--shadow-hover); }
.article-row:has(a:focus-visible) { outline: 3px solid var(--pa-primary); outline-offset: 2px; }
.article-row a:focus-visible { outline: 0; }
.article-row img { flex-shrink: 0; width: 120px; height: 90px; object-fit: cover; border-radius: 8px; background: var(--pa-section); }
.article-row-body { min-width: 0; }
.article-row-title { font-size: 1rem; font-weight: 700; line-height: 1.3; margin: 0 0 .3rem; }
.article-row-title a { color: var(--pa-navy); }
.article-row:hover .article-row-title a { color: var(--pa-primary); text-decoration: none; }
.article-row-text { color: var(--pa-muted); font-size: .88rem; line-height: 1.5; margin: 0; }
@media (max-width: 575.98px) { .article-row img { width: 88px; height: 66px; } .article-row-text { display: none; } }

/* FAQ accordion */
.faq-accordion { --bs-accordion-border-color: var(--pa-line); --bs-accordion-border-radius: var(--card-radius); --bs-accordion-inner-border-radius: calc(var(--card-radius) - 1px); --bs-accordion-btn-focus-box-shadow: var(--focus-ring); --bs-accordion-active-bg: var(--pa-surface); --bs-accordion-active-color: var(--pa-navy); --bs-accordion-btn-color: var(--pa-navy); }
.faq-accordion .accordion-header { margin: 0; }
.faq-accordion .accordion-button { font-weight: 700; font-size: 1rem; }

@media (prefers-reduced-motion: reduce) {
    .expired-deals-toggle .bi, .article-row { transition: none; }
}