/**
 * css/resources.css: views/resources.php (/resources), loaded only on that page (layouts/head.php). Mobile first: one card per area in each section,
 * one column on a phone, two from 720px. 16px text, 44px tap targets. Palette as the rest of the site: #12233D text, #DCE1E8 borders, #4B5A70 secondary text, #1E40AF accent.
 *
 * VERTICAL RHYTHM. Section: 40px above; heading, its rule, 12px, the optional note, 12px, the cards (a flex column with gap 12px). Card: a flex column, gap 10px, padding 16px
 * everywhere: [top: chip -8px- name -4px- contact (phone with its label on the line, hours, email)] -10px- [description paragraphs, 6px apart] -14px- [link button, pinned
 * to the bottom of the card with margin-top: auto so equal-height cards in a row line their buttons up]. A card without a phone, a description or a button keeps the same gaps
 * between the parts it does have. No min-height: a short card is only as tall as its row.
 */
.mv-wrap { max-width: var(--wrap-container, 960px); margin: 0 auto; padding: 24px var(--wrap-gutter, 16px) 64px; color: #12233D; }
.mv-title { margin: 0 0 12px; font-size: 28px; font-weight: 600; line-height: 1.2; }
.mv-intro { margin: 0; font-size: 17px; line-height: 1.6; color: #374151; max-width: 70ch; }

/* ---- city filter (shown by js/resources.js; the cards of other cities get [hidden]) ---- */
.mv-filter { margin: 24px 0 0; }
.mv-filter[hidden], .mv-card[hidden] { display: none; }
.mv-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mv-chip { min-height: 44px; padding: 0 16px; border: 1px solid #DCE1E8; border-radius: 999px; background: #FFFFFF; color: #12233D; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.mv-chip:hover { background: #EAF0FF; }
.mv-chip[aria-pressed="true"] { border-color: #1E40AF; background: #1E40AF; color: #FFFFFF; }
.mv-chip:focus-visible { outline: 3px solid #1E40AF; outline-offset: 2px; }
.mv-filter-hint { margin: 12px 0 0; max-width: 70ch; font-size: 15px; line-height: 1.5; color: #4B5A70; }
.mv-filter-status { margin: 4px 0 0; min-height: 0; font-size: 14px; color: #4B5A70; }

/* ---- sections ---- */
.mv-section { display: flex; flex-direction: column; gap: 12px; margin: 40px 0 0; scroll-margin-top: 80px; }
.mv-section-title { margin: 0; padding-bottom: 8px; border-bottom: 2px solid #12233D; font-size: 22px; line-height: 1.25; }
.mv-section-note { margin: 0; font-size: 15px; line-height: 1.5; color: #4B5A70; }
.mv-section-note a { color: #1E40AF; }

/* ---- cards ---- */
.mv-cards { display: grid; gap: 12px; grid-template-columns: 1fr; }
.mv-card { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 16px; border: 1px solid #DCE1E8; border-radius: 12px; background: #FFFFFF; }
.mv-card p, .mv-card ul, .mv-card h3 { margin: 0; }
.mv-top { display: flex; flex-direction: column; gap: 4px; }
.mv-head { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.mv-area-label { padding: 3px 10px; border-radius: 999px; background: #EAF0FF; color: #1E40AF; font-size: 13px; font-weight: 700; line-height: 1.3; }
.mv-name { font-size: 18px; line-height: 1.3; font-weight: 700; }
.mv-contact { display: flex; flex-direction: column; gap: 2px; }
.mv-phone-line { font-size: 17px; line-height: 1.3; }
.mv-phone { display: inline-flex; align-items: center; min-height: 32px; font-weight: 700; color: #1E40AF; text-decoration: none; }
.mv-phone:hover { text-decoration: underline; }
.mv-phone-label { margin-left: 4px; font-size: 14px; color: #4B5A70; }
.mv-hours { font-size: 14px; line-height: 1.4; color: #4B5A70; }
.mv-email { font-size: 15px; line-height: 1.4; overflow-wrap: anywhere; }
.mv-email a { color: #1E40AF; }
.mv-pending { align-self: flex-start; padding: 6px 10px; border-radius: 8px; background: #FFF1DB; color: #7A3A0C; font-size: 14px; font-weight: 600; line-height: 1.3; }
.mv-desc { display: flex; flex-direction: column; gap: 6px; }
.mv-line { font-size: 15px; line-height: 1.5; }
.mv-list { padding-left: 20px; font-size: 15px; line-height: 1.5; }
.mv-list li + li { margin-top: 4px; }
.mv-list--plain { padding-left: 0; list-style: none; }
.mv-list--plain li + li { margin-top: 4px; }
.mv-links { display: flex; flex-wrap: wrap; gap: 8px; margin: auto 0 0; padding-top: 4px; }   /* 10px card gap + 4px = 14px above the button; pinned to the bottom */
.mv-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid #1E40AF; border-radius: 10px; color: #1E40AF; font-size: 15px; font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.mv-link:hover { background: #EAF0FF; }

/* a section with ONE card (DMV, voter registration, internet): full width, the text capped at ~70 characters a line */
.mv-cards--single .mv-line, .mv-cards--single .mv-list { max-width: 70ch; }

.mv-cta { margin: 40px 0 0; padding-top: 24px; border-top: 1px solid #E3E8EF; }
.mv-cta-title { margin: 0; font-size: 22px; line-height: 1.3; }
.mv-cta-title a { color: #1E40AF; }

@media (min-width: 720px) {
  .mv-title { font-size: 34px; }
  .mv-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }   /* equal height within a row; a lone last card stays half width, on the left */
  .mv-cards--single { grid-template-columns: 1fr; }
  /* hospitals: lists of very different length. Two balanced columns instead of equal-height rows, so a short list is not a tall box with empty space under it */
  .mv-cards--flow { display: block; column-count: 2; column-gap: 16px; }
  .mv-cards--flow .mv-card { break-inside: avoid; margin: 0 0 16px; }
}