/*
 * Listing pages (REDESIGN slice A): /parcs/, /companies/ (park tiles), /articles/{tag}/ (article cards).
 * Mobile first; tokens and shared components in ../app.css.
 */

/* Park tiles: logo on a white plate, name, slogan; the whole tile is the link. */
.park-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
@media (min-width: 576px) { .park-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; } }
.park-tile { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--pa-line); border-radius: var(--card-radius); box-shadow: var(--shadow-soft); overflow: hidden; transition: box-shadow .18s ease, transform .18s ease; }
.park-tile:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.park-tile:has(a:focus-visible) { outline: 3px solid var(--pa-primary); outline-offset: 2px; }
.park-tile a:focus-visible { outline: 0; }
.park-tile-logo { display: flex; align-items: center; justify-content: center; height: 8.5rem; padding: 1rem 1.25rem; background: #fff; border-bottom: 1px solid var(--pa-line-soft); }
.park-tile-logo img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.park-tile-initial { display: inline-flex; align-items: center; justify-content: center; width: 4.5rem; height: 4.5rem; border-radius: 50%; background: var(--pa-surface); color: var(--pa-primary); font-size: 2rem; font-weight: 800; }
.park-tile-body { display: flex; flex-direction: column; flex: 1; padding: .9rem 1.1rem 1.1rem; }
.park-tile-name { font-size: 1.1rem; font-weight: 800; line-height: 1.25; margin: 0; }
.park-tile-name a { color: var(--pa-navy); }
.park-tile:hover .park-tile-name a { color: var(--pa-primary); text-decoration: none; }
.park-tile-text { color: var(--pa-muted); font-size: .9rem; line-height: 1.5; margin: .4rem 0 0; }
.park-tile-text p:last-child { margin-bottom: 0; }

/* Compact tiles (similar parks): logo and name only, several per row. */
.park-grid-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; }
@media (min-width: 768px) { .park-grid-compact { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .park-grid-compact { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.park-tile-compact .park-tile-logo { height: 5.5rem; padding: .75rem; }
.park-tile-compact .park-tile-body { padding: .6rem .8rem .75rem; }
.park-tile-compact .park-tile-name { font-size: .92rem; font-weight: 700; text-align: center; }

.listing-outro { margin: 1.5rem 0 0; color: var(--pa-muted); }

/* Article cards (/articles/{tag}/): photo 16:10, park kicker, title, description, "Voir plus". */
.article-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
@media (min-width: 768px) { .article-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.article-card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--pa-line); border-radius: var(--card-radius); box-shadow: var(--shadow-soft); overflow: hidden; transition: box-shadow .18s ease, transform .18s ease; }
.article-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.article-card:has(a:focus-visible) { outline: 3px solid var(--pa-primary); outline-offset: 2px; }
.article-card a:focus-visible { outline: 0; }
.article-card .card-media { aspect-ratio: 16 / 10; }
.article-card:hover .card-media img { transform: scale(1.03); }
.article-card .card-title-pa { font-size: 1.08rem; }
.article-card .card-text-pa { font-size: .9rem; line-height: 1.55; margin-top: .45rem; }
.article-card .card-text-pa p:last-child { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
    .park-tile, .article-card { transition: none; }
    .park-tile:hover, .article-card:hover { transform: none; }
    .article-card:hover .card-media img { transform: none; }
}