/* /maps/ — Smokey map, legenda (Figma 571:8348), Around the hill (Figma 571:8277).
   Legenda a katalog jsou ve Figme kresleny ve velkem meritku (3280 / 5560 px siroke
   ramce); na strance jsou zmenseny na ~1/2 (legenda) a ~1/3 (katalog).          */

.mp-wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: calc(80 * var(--u)); }

/* ------------------------------------------------------------ mapa */
.mp-map { background: #f5f7fb; padding: calc(80 * var(--u)) 0 calc(60 * var(--u)); }
.mp-map__inner { width: calc(1761 * var(--u)); margin-inline: auto; box-shadow: 0 10px 40px rgba(0, 11, 59, .12); }

/* ------------------------------------------------------------ legenda (571:8348, meritko 1/2) */
.mp-legend { background: #f5f7fb; color: var(--c-brand); padding: calc(20 * var(--u)) 0 calc(100 * var(--u)); }
.mp-legend__grid { display: grid; grid-template-columns: 1fr 1fr; gap: calc(80 * var(--u)); align-items: start; }
.mp-card { background: #fff; border-radius: 16px; padding: calc(40 * var(--u)); display: grid; gap: calc(26 * var(--u)); }
.mp-sec { display: grid; gap: calc(14 * var(--u)); }
.mp-sec + .mp-sec { padding-top: calc(26 * var(--u)); border-top: 1px solid var(--c-brand); }
.mp-h { font-weight: 700; font-size: max(24px, calc(36 * var(--u))); line-height: 1.22; }
.mp-h--2 { font-size: max(21px, calc(32 * var(--u))); }
.mp-h4 { margin: calc(4 * var(--u)) 0 calc(4 * var(--u)); font-weight: 700; font-size: max(15px, calc(20 * var(--u))); line-height: 1.22; }
.mp-rows { display: grid; gap: calc(10 * var(--u)); }
.mp-row { display: flex; align-items: center; gap: calc(14 * var(--u)); font-size: max(17px, calc(24 * var(--u))); line-height: 1.35; }
.mp-row__ico { width: max(22px, calc(32 * var(--u))); height: max(22px, calc(32 * var(--u))); flex: none; fill: currentColor; }
.mp-small { font-size: max(13px, calc(17 * var(--u))); line-height: 1.22; }
.mp-lead { font-size: max(15px, calc(20 * var(--u))); line-height: 1.3; }
.mp-planned { font-weight: 700; font-size: max(13px, calc(18 * var(--u))); line-height: 1.22; }
.mp-grp { display: grid; gap: calc(10 * var(--u)); }

.mp-more { display: block; margin-top: calc(10 * var(--u)); }
.mp-more > summary, .mp-more--link { display: grid; gap: 4px; cursor: pointer; list-style: none; }
.mp-more > summary::-webkit-details-marker { display: none; }
.mp-more__t { font-weight: 700; font-size: max(17px, calc(24 * var(--u))); line-height: 1.22; }
.mp-more__s { font-size: max(13px, calc(17 * var(--u))); line-height: 1.22; }
.mp-more > summary:hover .mp-more__t, .mp-more--link:hover .mp-more__t { text-decoration: underline; text-underline-offset: 3px; }
.mp-more[open] .mp-more__t { color: var(--c-navy); }
.mp-more__list { display: grid; gap: 8px; margin: 12px 0 4px; padding-left: 2px; font-size: max(15px, calc(19 * var(--u))); line-height: 1.3; }
.mp-more__list li { display: flex; align-items: center; gap: 10px; }
.mp-more__ico { width: 20px; height: 20px; flex: none; fill: currentColor; }
.mp-more__list--key li::before { content: ""; width: 22px; height: 3px; flex: none; background: var(--c); }
.mp-more__list--key li.is-dash::before { background: repeating-linear-gradient(90deg, var(--c) 0 6px, transparent 6px 10px); }
.mp-more__list--key li { color: var(--c); }

/* sjezdovky */
.mp-runs__g { margin-top: calc(12 * var(--u)); }
.mp-runs__gh { display: flex; gap: calc(20 * var(--u)); align-items: center; font-weight: 700; font-size: max(15px, calc(20 * var(--u))); margin-bottom: calc(6 * var(--u)); }
.mp-runs__g--easy .mp-runs__gh span { color: #448d68; }
.mp-runs__g--med .mp-runs__gh span { color: #387bb8; }
.mp-runs__g--hard .mp-runs__gh span { color: #20242a; }
.mp-runs { display: grid; gap: calc(6 * var(--u)); }
.mp-runs a { display: flex; align-items: center; gap: calc(10 * var(--u)); padding: 2px 0; }
.mp-runs a:hover .mp-runs__t { text-decoration: underline; text-underline-offset: 3px; }
.mp-runs__n { display: grid; place-items: center; width: max(26px, calc(31 * var(--u))); height: max(26px, calc(31 * var(--u))); flex: none; border: 1.5px solid var(--c-brand); border-radius: 50%; font-weight: 700; font-size: max(12px, calc(15 * var(--u))); }
.mp-runs__t { flex: 1; display: grid; font-size: max(17px, calc(24 * var(--u))); line-height: 1.3; }
.mp-runs__t small { font-size: max(12px, calc(15 * var(--u))); line-height: 1.22; }
.mp-runs__s { width: 2em; text-align: right; font-weight: 700; font-size: max(15px, calc(18 * var(--u))); }
.mp-runs__key { margin-top: calc(16 * var(--u)); padding-top: calc(14 * var(--u)); border-top: 1px solid var(--c-brand); font-size: max(15px, calc(20 * var(--u))); white-space: pre-wrap; }
.mp-card--runs .mp-small { margin-top: 4px; }
.mp-more--future { margin-top: calc(18 * var(--u)); padding-top: calc(18 * var(--u)); border-top: 1px solid var(--c-brand); }
.mp-one { margin-top: calc(40 * var(--u)); font-weight: 700; font-size: max(15px, calc(20 * var(--u))); }
.mp-one-p { margin-top: 6px; font-size: max(15px, calc(20 * var(--u))); line-height: 1.35; }

/* ------------------------------------------------------------ Around the hill (571:8277, meritko ~1/3) */
.mp-around { background: var(--c-brand); color: #fff; padding: calc(70 * var(--u)) 0 calc(80 * var(--u)); }
.mp-around__h { font-weight: 700; font-size: max(24px, calc(36 * var(--u))); line-height: 1.22; }
.mp-around__sub { margin-top: calc(10 * var(--u)); font-size: max(15px, calc(20 * var(--u))); line-height: 1.35; }
.mp-around__h + .mp-around__sub { margin-top: calc(6 * var(--u)); }
.mp-around__cols { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: calc(40 * var(--u)); margin-top: calc(40 * var(--u)); align-items: start; }
.mp-around__ch { font-weight: 700; font-size: max(18px, calc(24 * var(--u))); line-height: 1.22; color: #c49c51; margin-bottom: calc(14 * var(--u)); }
.mp-around__list { display: grid; gap: calc(16 * var(--u)); }
.mp-around__list--2 { grid-template-columns: 1fr 1fr; column-gap: calc(40 * var(--u)); grid-auto-flow: column; grid-template-rows: repeat(10, auto); }
.mp-around__item { display: flex; gap: calc(12 * var(--u)); }
.mp-around__ico { width: max(20px, calc(24 * var(--u))); height: max(20px, calc(24 * var(--u))); flex: none; fill: currentColor; margin-top: 1px; }
.mp-around__n { display: block; font-size: max(16px, calc(20 * var(--u))); line-height: 1.3; }
.mp-around__p { display: block; font-size: max(13px, calc(16 * var(--u))); line-height: 1.3; }
.mp-around__note { margin-top: calc(44 * var(--u)); font-size: max(15px, calc(20 * var(--u))); }
.mp-around__back { display: inline-flex; align-items: center; gap: 10px; margin-top: calc(22 * var(--u)); font-size: max(15px, calc(20 * var(--u))); }
.mp-around__back:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 1279px) {
  .mp-wrap { padding-inline: 24px; }
  .mp-map { padding: 32px 12px; }
  .mp-map__inner { width: 100%; box-shadow: none; }
  .mp-legend__grid { grid-template-columns: 1fr; gap: 20px; }
  .mp-card { padding: 24px 20px; gap: 22px; }
  .mp-around__cols { grid-template-columns: 1fr 1fr; gap: 28px; }
  .mp-around__col--summer { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .mp-wrap { padding-inline: 16px; }
  .mp-map { padding: 16px 0; }
  .mp-around { padding: 48px 0; }
  .mp-around__cols { grid-template-columns: 1fr; }
  .mp-around__list--2 { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none; }
}