/* The site's standard for a section of maps (templates/core/designs/_maps.html), on every designed page.
   One map: text 38.2 | map card 61.8 (as Reserved & Protected Forest Map, Territorial Overview).
   Two or more: the heading, then map cards across the width (as Maps, Forest Cover), so many to a row (mp-cols-N);
   mp-small: four maps two to a row, each the size of a card in a row of three. */
.mp-sec { padding: 84px 0; background: #f9f6ef; }
.mp-wrap { margin: 0 auto; padding: 0 5%; box-sizing: border-box; }
.mp-h2 { margin: 0; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: clamp(28px, 2.5vw, 38px); line-height: 1.02;
    letter-spacing: -.035em; color: #0a2e1a; text-align: left; text-wrap: balance; }
.mp-sub { margin: 12px 0 0; font-size: 16px; line-height: 1.6; color: #4b5563; max-width: 52ch; }
.mp-sub p { margin: 0; }

/* one map */
.mp-one { display: grid; grid-template-columns: minmax(0, 38.2fr) minmax(0, 61.8fr); gap: 52px; align-items: start; }   /* the heading at the top, where every section starts */
.mp-hint { display: flex; align-items: center; gap: 8px; margin: 32px 0 0; font-size: 14px; color: #4b5563; }
.mp-open { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; padding: 12px 20px; border: 0; border-radius: 999px; background: #1a472a; color: #fff;
    font: 600 14px/1 'Plus Jakarta Sans', sans-serif; cursor: pointer; transition: background-color 150ms cubic-bezier(.4, 0, .2, 1); }
.mp-open:hover { background: #0a2e1a; }
.mp-open:active { transform: translateY(1px); }
.mp-open:focus-visible { outline: 2px solid #1a472a; outline-offset: 3px; }
.mp-card { justify-self: end; width: min(100%, 640px); margin: 0; padding: 12px; border-radius: 8px; background: #f2ede1; box-sizing: border-box; }
.mp-card img { display: block; width: 100%; max-height: 420px; object-fit: contain; border-radius: 4px; background: #fff; }

/* two or more maps */
.mp-head { margin-bottom: 32px; }
.mp-grid { display: grid; grid-template-columns: repeat(var(--mp-cols, 2), minmax(0, 1fr)); gap: 20px; }
.mp-cols-1 { --mp-cols: 1; max-width: 880px; }
.mp-cols-2 { --mp-cols: 2; }
.mp-cols-3 { --mp-cols: 3; }
.mp-cols-4 { --mp-cols: 4; }
.mp-grid.mp-small { max-width: calc((100% - 40px) * 2 / 3 + 20px); }
.mp-tile { margin: 0; padding: 12px; border-radius: 8px; background: #f2ede1; cursor: zoom-in; outline: none;
    transition: transform 250ms cubic-bezier(.16, 1, .3, 1), box-shadow 250ms cubic-bezier(.16, 1, .3, 1); }
.mp-tile:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -28px rgba(10, 46, 26, .45); }
.mp-tile:focus-visible { outline: 2px solid #1a472a; outline-offset: 2px; }
.mp-tile img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: contain; border-radius: 4px; background: #fff; }   /* a map is never cropped */
.mp-tile figcaption { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 20px 8px 8px; }
.mp-tile-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mp-tile strong { font-size: 20px; line-height: 1.3; color: #0a2e1a; }
.mp-cols-3 .mp-tile strong, .mp-cols-4 .mp-tile strong, .mp-small .mp-tile strong { font-size: 17px; }
.mp-tile-text > span { font-size: 14px; color: #4b5563; }
.mp-tile em { flex: none; font-style: normal; font-size: 14px; font-weight: 600; color: #1a472a; }
.mp-tile:hover em { text-decoration: underline; text-underline-offset: 4px; }
.mp-cols-3 .mp-tile figcaption, .mp-cols-4 .mp-tile figcaption, .mp-small .mp-tile figcaption { flex-direction: column; align-items: flex-start; gap: 8px; }

@media (max-width: 1100px) { .mp-cols-4 { --mp-cols: 3; } }
@media (max-width: 900px) {
    .mp-sec { padding: 52px 0; }
    .mp-wrap { padding: 0 20px; }
    .mp-one { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .mp-card { justify-self: stretch; width: 100%; }
    .mp-hint { display: none; }
    .mp-cols-3, .mp-cols-4 { --mp-cols: 2; }
    .mp-grid.mp-small { max-width: none; }
    .mp-tile figcaption { flex-direction: column; align-items: flex-start; gap: 8px; }
}
@media (max-width: 560px) { .mp-grid { --mp-cols: 1 !important; } }
@media (hover: none) { .mp-hint { display: none; } }
@media (prefers-reduced-motion: reduce) { .mp-tile, .mp-open { transition: none; } .mp-tile:hover { transform: none; } }