/* ══════════════════════════════════════════════
   FOLHAS — Shared Components
   Cards, buttons, pills, search, filters, hero, etc.
   ══════════════════════════════════════════════ */

/* ── Hero Banner ──────────────────────────────── */
.hero {
    margin: 0;
    width: 100%;
    min-height: 15.625rem;
    display: flex;
    overflow: hidden;
    position: relative;
    background: var(--gray-light);
    border-radius: 0;
}

/* background-color, not the `background` shorthand: the shorthand resets
   background-size/position and would silently discard the `cover` framing that
   .bg-cover applies from common.css. */
.hero-image {
    flex: 1;
    background-color: var(--gray);
}

/* Figma V2 program hero: a row of six square tiles instead of one banner.
   Six 1fr columns with a 1rem gap resolve to Figma's 260px tiles at the
   1640px content width. */
.hero--gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--card-gap);
    min-height: 0;
    background: none;
    overflow: visible;
}

.hero-tile {
    aspect-ratio: 1;
    background-color: var(--gray);
}

.hero-pattern {
    display: none;
    position: absolute;
    right: 0;
    bottom: 0;
    width: 812px;
    height: 541px;
}

/* ── Category Hero (orange banner) ────────────── */
.hero-category {
    margin: 0;
    width: 100%;
    min-height: 12.5rem;
    display: flex;
    overflow: hidden;
    position: relative;
}

.hero-category-img {
    flex: 1;
    background: var(--orange);
}

.hero-category-pattern {
    display: none;
    position: absolute;
    right: 0;
    top: 0;
    width: 871px;
    height: 100%;
}

.hero-category-title {
    position: absolute;
    bottom: var(--space-lg);
    left: var(--side-padding);
    font-family: var(--font-heading);
    font-size: var(--text-5xl);
    font-weight: 700;
    color: var(--cream);
    line-height: 1.1;
}

/* ── Cards Grid ───────────────────────────────── */
/* Figma V2 shows exactly two columns, so the count is stated outright.
   An auto-fill track of `minmax(min(50%, 50rem), 1fr)` cannot work here: below
   1600px of container the min resolves to 50%, and two 50% tracks plus the gap
   overflow 100%, collapsing the grid to a single column. */
.cards-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--card-gap);
}

/* ── Card Component ───────────────────────────── */
.card,
.org-card {
    display: flex;
    width: 100%;
    height: var(--card-height);
    min-height: 7.5rem;
    border: var(--card-border);
    border-radius: var(--card-radius);
    overflow: hidden;
    background: var(--white);
    text-decoration: none;
    cursor: pointer;
}

.org-card {
    transition: box-shadow var(--transition-fast);
}

.card.featured {
    background: var(--green);
}

.card-thumb,
.org-card-thumb {
    width: var(--card-thumb);
    min-width: var(--card-thumb);
    max-width: 40%;
    height: 100%;
}

/* Organisation logos sit on white, so Figma V2 rules them off from the text.
   Programme cards need no divider — their saturated thumb already reads as a
   separate panel. */
.org-card-thumb {
    border-right: var(--card-border);
}

/* Figma V2 pins the title to the top of the card and the type/count to the
   bottom, letting the space between them flex. */
.card-content,
.org-card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: var(--space-md);
    gap: var(--space-sm);
    min-width: 0;
}

/* Figma V2 sets card titles in caps. Applied as a transform so the underlying
   text — and therefore the accessible name and the Django field — stays in
   natural case. */
.card-title,
.org-card-name {
    font-family: var(--font-body);
    font-size: var(--text-4xl);
    font-weight: 700;
    color: var(--green);
    text-transform: uppercase;
    line-height: 1.2;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.card:focus-visible,
.org-card:focus-visible {
    outline-offset: var(--outline-offset);
}

.card.featured .card-title {
    color: var(--cream);
}

.card-type {
    font-family: var(--font-body);
    font-size: var(--text-lg);
    font-weight: 500;
    color: var(--black);
}

.org-card-count {
    font-family: var(--font-body);
    font-size: var(--text-lg);
    font-weight: 500;
    color: var(--black);
    text-transform: uppercase;
}

/* ── Buttons ──────────────────────────────────── */
.btn-filled {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 3rem;
    padding: 0 var(--space-lg);
    border: var(--border-width) solid var(--green);
    border-radius: var(--card-radius);
    background: var(--green);
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--white);
    text-decoration: none;
    cursor: pointer;
    transition: opacity var(--transition-fast);
    white-space: nowrap;
}

.btn-filled:is(:hover, :focus-visible) {
    opacity: 0.9;
}

/* FILTRAR button */
/* Figma V2 gives this the same pill language as the section "VER MAIS" button:
   green outline, fully rounded, black label. */
.btn-filter {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    height: 2.5rem;
    padding: 0 var(--space-lg);
    border: var(--border-width) solid var(--green);
    border-radius: var(--radius-pill);
    background: var(--white);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--black);
    cursor: pointer;
    text-transform: uppercase;
}

/* Figma V2 fills the button while its panel is open. */
.btn-filter[aria-expanded="true"] {
    background: var(--green);
    color: var(--white);
}

.btn-filter:focus-visible {
    outline: var(--border-width) solid var(--green);
    outline-offset: var(--outline-offset);
}

.btn-filter svg {
    width: 1.125rem;
    height: 1.125rem;
}

/* ── Category Pills / Tags ────────────────────── */
.pills {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 0.25rem;
}

.pills::-webkit-scrollbar {
    display: none;
}

.pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2.25rem;
    padding: 0 var(--space-md);
    border: var(--border-width) solid var(--green);
    border-radius: var(--radius-pill);
    background: transparent;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--black);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition:
        background-color var(--transition-fast),
        color var(--transition-fast);
    text-transform: uppercase;
}

.pill:is(:hover, :focus-visible),
.pill.active {
    background: var(--green);
    color: var(--white);
}

/* Small tag pill (detail page) */
.tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 1.875rem;
    padding: 0 var(--space-sm);
    border: var(--border-width-thin) solid var(--green);
    border-radius: var(--radius-tag);
    background: transparent;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--green);
    text-decoration: none;
    white-space: nowrap;
    text-transform: uppercase;
}

/* ── Search Bar ───────────────────────────────── */
.search-bar {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    border-bottom: var(--border-width) solid var(--green);
    padding: var(--space-md) 0;
}

.search-bar input {
    flex: 1;
    border: none;
    outline: none;
    font-family: var(--font-body);
    font-size: var(--text-5xl);
    font-weight: 500;
    color: var(--black);
    background: transparent;
}

.search-bar input::placeholder {
    color: var(--green);
}

.search-bar-icon {
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

.search-bar-icon svg {
    width: 100%;
    height: 100%;
    stroke: var(--green);
    fill: none;
    stroke-width: 2.5;
}

/* Search bar with filter button */
.search-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
}

.search-row .btn-filter {
    align-self: flex-start;
}

.search-row .search-bar {
    flex: 1;
}

/* ── Filter Panel ─────────────────────────────── */
/* Figma V2 frames the panel with rules top and bottom and flows the groups as a
   wrapping row, so the per-group dividers are gone. */
.filter-panel {
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--space-2xl);
    row-gap: var(--space-2xl);
    padding: var(--space-2xl) 0;
    /* Reset first: .filter-panel is a <fieldset>, so the UA supplies a border
       on all four sides. */
    border: none;
    border-top: var(--border-width) solid var(--black);
    border-bottom: var(--border-width) solid var(--black);
}

/* Setting display above would otherwise override the UA's [hidden] rule and
   leave collapsed panels visible. */
.filter-panel[hidden] {
    display: none;
}

.top-spaced-filter-panel {
    margin-top: var(--space-4xl);
}

.filter-group {
    display: flex;
    flex-direction: column;
    align-items: baseline;
    gap: var(--space-sm);
    padding: 0;
}

.filter-label {
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--black);
    text-transform: uppercase;
    width: auto;
    flex-shrink: 0;
    letter-spacing: var(--tracking);
}

.filter-options {
    display: flex;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.filter-radio {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    cursor: pointer;
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 500;
    color: var(--black);
}

.filter-radio input[type="radio"] {
    appearance: none;
    width: 1.25rem;
    height: 1.25rem;
    border: var(--border-width) solid var(--black);
    border-radius: 50%;
    cursor: pointer;
    position: relative;
}

.filter-radio input[type="radio"]:focus-visible {
    outline: var(--border-width) solid var(--green);
    outline-offset: var(--outline-offset);
}

.filter-radio input[type="radio"]:checked {
    border-color: var(--black);
}

/* Inset rather than fixed px so the dot keeps Figma's 25:41 ratio at every
   radio size. */
.filter-radio input[type="radio"]:checked::after {
    content: "";
    position: absolute;
    inset: 19.5%;
    border-radius: 50%;
    background: var(--black);
}

/* ── Detail Side Info (two-column label/value rows) ── */
.detail-side-info {
    display: flex;
    flex-direction: column;
}

.detail-side-row {
    display: flex;
    flex-direction: column;
    align-items: baseline;
    border-top: var(--border-width) solid var(--black);
    padding: var(--space-md) 0;
}

.detail-side-row:last-child {
    border-bottom: var(--border-width) solid var(--black);
}

.detail-side-label {
    width: auto;
    flex-shrink: 1;
    font-size: var(--text-3xl);
    margin-bottom: 0.25rem;
    font-weight: 500;
    color: var(--green);
    margin: 0;
}

.detail-side-value {
    flex: 1;
    font-size: var(--text-3xl);
    font-weight: 700;
    color: var(--black);
    margin: 0;
}

.detail-side-value span {
    display: block;
}

.detail-side-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    color: var(--black);
    text-decoration: none;
    font-weight: 700;
}

.detail-side-link:is(:hover, :focus-visible) {
    text-decoration: underline;
}

.detail-side-link svg {
    width: 1.625rem;
    height: 1.625rem;
    stroke: var(--black);
    stroke-width: 2;
    fill: none;
}

/* ── Accordion (FAQ) ──────────────────────────── */
.accordion {
    list-style: none;
}

.accordion-heading {
    font: inherit;
    margin: 0;
}

.accordion-item {
    border-bottom: var(--border-width) solid var(--black);
}

.accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-lg) 0;
    cursor: pointer;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
}

.accordion-title {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--black);
}

.accordion-header:focus-visible {
    outline-offset: -3px;
}

.accordion-arrow {
    width: var(--icon-sm);
    height: var(--icon-sm);
    flex-shrink: 0;
    color: var(--green);
    transition: transform var(--transition-normal);
}

.accordion-arrow svg {
    width: var(--icon-sm);
    height: var(--icon-sm);
    stroke: var(--green);
    fill: none;
    stroke-width: var(--border-width);
}

.accordion-item.open .accordion-arrow {
    transform: rotate(180deg);
}

.accordion-body {
    padding: 0 0 var(--space-lg);
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 400;
    color: var(--black);
    line-height: 1.6;
}

/* ── Calendar ─────────────────────────────────── */
/* Figma V2 drops the boxed table: no outer frame and no grid lines — each day
   cell is ruled off along its top edge only. */
.calendar {
    overflow-x: auto;
}

.calendar-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xl);
    padding: var(--space-lg);
}

.calendar-nav-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--green);
    font-size: var(--text-xl);
    display: flex;
    align-items: center;
}

.calendar-nav-btn svg {
    width: var(--icon-lg);
    height: var(--icon-lg);
    stroke: var(--green);
    fill: none;
    stroke-width: var(--border-width);
}

.calendar-month {
    font-family: var(--font-body);
    font-size: var(--text-xl);
    font-weight: 700;
    text-transform: uppercase;
    width: 17.5rem;
    text-align: center;
    letter-spacing: var(--tracking-wide);
}

.calendar-grid {
    width: 100%;
    min-width: 37.5rem;
    table-layout: fixed;
    border-collapse: collapse;
}

.calendar-day-header {
    padding: var(--space-md) 0.5rem;
    text-align: center;
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--gray-dark);
    text-transform: uppercase;
}

.calendar-day {
    min-height: 5rem;
    padding: var(--space-md) 0.5rem;
    position: relative;
}

/* The rule stops 21px short of the cell's right edge, which is how Figma's
   column gutter reads. A table can't carry a real gap without border-spacing
   (which would also inset the outer edges), so the rule is drawn as an
   overlay instead. */
.calendar-day::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 1.3125rem;
    border-top: var(--border-width) solid var(--black);
}

/* Last column runs to the content edge — no gutter to its right. */
.calendar-day:nth-child(7n)::before {
    right: 0;
}

.calendar-day-num {
    display: block;
    font-family: var(--font-body);
    font-size: var(--text-md);
    font-weight: 500;
    color: var(--black);
    margin-bottom: var(--space-xs);
}

.calendar-event {
    display: block;
    padding: 0.25rem 0.375rem;
    margin-bottom: 0.25rem;
    border: var(--border-width-thin) solid var(--green);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 700;
    background: var(--white);
    text-decoration: none;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* ── Map ──────────────────────────────────────── */
.map-container {
    min-height: 37.5rem;
    height: 25rem;
    max-height: 56.25rem;
    margin: var(--space-lg) var(--side-padding) 0;
    border-radius: var(--radius-sm);
}

/* ── Map Markers ─────────────────────────────── */
.map-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--green);
    cursor: pointer;
    border: none;
}

.map-dot.large {
    width: 32px;
    height: 32px;
}

/* ── Map Popup Card ──────────────────────────── */
.map-popup-wrapper .leaflet-popup-content-wrapper {
    background: var(--white);
    border: var(--border-width-thin) solid var(--black);
    border-radius: var(--radius-lg);
    padding: 0;
    overflow: hidden;
    box-shadow: none;
}

/* !important needed to override Leaflet's inline width style */
.map-popup-wrapper .leaflet-popup-content {
    margin: 0;
    width: 280px !important;
    max-width: calc(100vw - 60px) !important;
}

.map-popup-wrapper .leaflet-popup-tip {
    display: none;
}

.map-popup-inner {
    display: flex;
    height: auto;
    min-height: 80px;
}

/* Same treatment as .org-card-thumb — the popup is an organisation card. */
.map-popup-img {
    width: 100px;
    min-width: 100px;
    height: 100%;
    border-right: var(--card-border);
}

.map-popup-content {
    padding: var(--space-md) var(--space-lg);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space-xs);
}

.map-popup-title {
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--green);
    text-transform: uppercase;
}

.map-popup-count {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--black);
    text-transform: uppercase;
}

/* ── Team Grid (about page) ───────────────────── */
/* Figma V2: 260x260 photos on a 1rem gutter, names left-aligned beneath. */
.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    gap: var(--card-gap);
}

.team-member {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
}

.team-photo {
    width: 100%;
    aspect-ratio: 1;
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.team-name {
    font-family: var(--font-body);
    font-size: var(--text-4xl);
    font-weight: 700;
    color: var(--black);
    text-transform: uppercase;
}

/* ── Partners Row (about page) ────────────────── */
.partners-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--card-gap);
}

/* Figma V2 reduces each partner to a square box holding only the logo. */
.partner-card {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    padding: var(--space-lg);
    border: var(--border-width-divider) solid var(--black);
    border-radius: 1.25rem;
    background: var(--white);
}

.partner-logo {
    width: 100%;
    height: 100%;
}

/* ── Scrollable results subtitle ──────────────── */
.results-subtitle {
    font-family: var(--font-body);
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--green);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    margin-bottom: var(--space-xl);
}

/* ── Shared Page Layout ──────────────────────────
   Reusable layout classes extracted from page-specific
   <style> blocks to avoid duplication.
   ──────────────────────────────────────────────── */

.pills-row {
    padding: var(--space-lg) var(--side-padding) 0;
    margin-bottom: var(--space-md);
}

.cards-section {
    padding: var(--space-2xl) var(--side-padding) 0;
}

.related-section {
    padding: var(--space-2xl) var(--side-padding) 0;
}

.related-section .section-divider {
    margin-top: var(--space-xl);
}

/* Two-column detail layout (main content + aside) */
.detail-body {
    padding: var(--space-2xl) var(--side-padding) 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2xl);
    align-items: flex-start;
}

.detail-body-main {
    flex: 1;
}

.detail-body-aside {
    width: 100%;
    flex-shrink: 0;
}

/* Full-width green action button */
.btn-block {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 3.5rem;
    background: var(--green);
    border: var(--border-width) solid var(--green);
    color: var(--white);
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    margin-top: var(--space-lg);
}

.btn-block:is(:hover, :focus-visible) {
    opacity: 0.9;
}

/* Green variant of filter panel (search results page). The green itself is
   painted by the .search-filters band so it can run behind the search row too;
   this variant only drops the rules and re-inks the controls for that band. */
.filter-panel--green {
    padding: var(--space-lg) 0 var(--space-xl);
    border: none;
}

.filter-panel--green .filter-label {
    color: var(--white);
}

.filter-panel--green .filter-radio {
    color: var(--white);
}

.filter-panel--green .filter-radio input[type="radio"] {
    border-color: var(--white);
}

.filter-panel--green .filter-radio input[type="radio"]:checked {
    border-color: var(--white);
}

.filter-panel--green .filter-radio input[type="radio"]:checked::after {
    background: var(--white);
}

/* ── Page-Specific Layout ────────────────────── */

/* Home */
.intro {
    padding: var(--space-4xl) var(--side-padding) 0;
}

.intro h1 {
    margin-bottom: var(--space-xl);
}

.intro p {
    max-width: 41.8125rem;
}

.category {
    margin-bottom: var(--space-xl);
}

/* Detail (folha-detalhe) */
.detail-top {
    padding: var(--space-2xl) var(--side-padding) 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    align-items: flex-start;
    margin-bottom: var(--space-xl);
}

.detail-top-left {
    flex: 1;
}

.detail-top-right {
    font-family: var(--font-body);
    font-size: var(--text-4xl);
    font-weight: 700;
    color: var(--black);
}

.detail-top .detail-type-label {
    font-size: var(--text-2xl);
    font-weight: 500;
    margin-bottom: var(--space-xl);
}

.detail-top .detail-main-title {
    font-family: var(--font-body);
    font-size: var(--text-6xl);
    font-weight: 700;
    color: var(--green);
    line-height: 1.1;
}

.detail-tags {
    padding: var(--space-lg) var(--side-padding) 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    margin-bottom: var(--space-3xl);
}

.detail-section {
    margin-bottom: var(--space-2xl);
}

.detail-section-title {
    font-family: var(--font-body);
    font-size: var(--text-4xl);
    font-weight: 700;
    color: var(--green);
    margin-bottom: var(--space-md);
}

.detail-section p {
    line-height: 1.6;
}

/* Figma V2 gives the tags grid a lot of air — 218px from the text above and
   168px down to the next heading, which at desktop means 128px/72px of padding.
   Expressed against --space-section (5rem at desktop) so the same ratio scales
   down to 64px/36px on mobile and 96px/54px on tablet. */
.tags-section {
    padding:
        calc(var(--space-section) * 1.6) var(--side-padding)
        calc(var(--space-section) * 0.9);
}

/* Figma V2: separate columns with a black rule above and below each column's
   run of labels — no vertical separators. Every cell carries the bottom rule
   and only the (always-full) first row carries a top rule, so the pattern holds
   for any number of tags. */
.tags-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--card-gap);
}

.tags-grid-cell {
    padding: var(--space-lg) 0;
    font-size: var(--text-lg);
    font-weight: 700;
    text-transform: uppercase;
    border-bottom: var(--border-width) solid var(--black);
}

.tags-grid-cell:nth-child(-n + 2) {
    border-top: var(--border-width) solid var(--black);
}

/* Organization detail */
/* Figma V2 pairs the organisation name with its logo mark. */
.org-detail-title {
    padding: var(--space-4xl) var(--side-padding) 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2xl);
}

/* logo-*.png files carry a wide transparent margin (the Técnico mark occupies
   499x194 of an 842x595 canvas), so the box is sized up to land Figma's
   258x100 of visible ink. */
.org-detail-logo img {
    width: 27.1875rem;
    height: auto;
}

.detail-body-main > .body-text {
    margin-top: var(--space-lg);
    /* Figma V2 wraps the organisation blurb at 667px rather than letting it
       run the full width of the main column. */
    max-width: 41.75rem;
}

/* About */
.about-intro {
    padding: var(--space-4xl) var(--side-padding) 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.about-intro p {
    margin-top: var(--space-lg);
}

.team-section h2,
.partners-section h2 {
    margin-bottom: var(--space-2xl);
}

/* Organizations listing */
.org-section {
    padding: 0 var(--side-padding);
}

.org-title {
    padding: var(--space-4xl) 0 var(--space-2xl);
    margin-bottom: var(--space-xl);
}

/* Search results */
.results-header {
    padding: var(--space-2xl) var(--side-padding) 0;
    margin-bottom: var(--space-lg);
}

/* Figma V2 runs one full-bleed green band behind the search row AND the filter
   panel while the panel is open, so the two read as a single block rather than
   a white strip stacked on a green one. The band is keyed off the panel's own
   [hidden] attribute, so it appears exactly when the JS reveals the panel and
   there is no second piece of state to keep in sync. The colours that have to
   invert on green are routed through custom properties, which keeps the
   :has() selector to a single rule. */
.search-filters {
    --search-ink: var(--black);
    --search-hint: var(--green);
    --search-rule: var(--green);
    --search-glass: var(--green);
    padding: var(--space-lg) var(--side-padding) 0;
}

.search-filters:has(.filter-panel:not([hidden])) {
    --search-ink: var(--white);
    --search-hint: var(--overlay-subtle);
    --search-rule: var(--white);
    --search-glass: var(--white);
    background: var(--green);
}

.search-filters .search-bar {
    border-bottom-color: var(--search-rule);
}

.search-filters .search-bar input {
    width: 100%;
    font-family: var(--font-body);
    font-size: var(--text-5xl);
    font-weight: 700;
    color: var(--search-ink);
}

.search-filters .search-bar input::placeholder {
    color: var(--search-hint);
}

.search-filters .search-bar-icon svg {
    stroke: var(--search-glass);
}

.search-filters .search-row,
.search-filters .search-bar {
    max-width: 100%;
}

/* Here FILTRAR keeps one look in both states — a white pill with a black label
   and a green icon. Filling it green while the panel is open, as the standalone
   button does, would erase it into the band behind it. */
.search-filters .btn-filter[aria-expanded="true"] {
    background: var(--white);
    color: var(--black);
    border-color: var(--white);
}

.search-filters .btn-filter svg {
    color: var(--green);
}

/* Category listing */
.filter-section {
    padding: var(--space-2xl) var(--side-padding) 0;
    margin-top: var(--space-xl);
    margin-bottom: var(--space-md);
}

/* My folhas */
.my-folhas-title {
    margin-bottom: var(--space-xl);
}

/* FAQs, Calendar, Map — shared h1 spacing */
.faqs-section h1,
.calendar-page h1,
.map-page h1 {
    margin-bottom: var(--space-3xl);
}

/* ══════════════════════════════════════════════
   Components — Responsive
   ══════════════════════════════════════════════ */

/* ── Tablet+ (≥768px) ────────────────────────── */
@media (min-width: 768px) {
    /* Hero */
    .hero {
        margin: var(--space-2xl) var(--side-padding) 0;
        width: auto;
        min-height: 25rem;
    }

    .hero-pattern {
        display: block;
    }

    .hero-category {
        margin: var(--space-2xl) var(--side-padding) 0;
        width: auto;
        min-height: 18.75rem;
    }

    .hero-category-pattern {
        display: block;
    }

    .hero-category-title {
        font-size: var(--text-6xl);
        bottom: var(--space-2xl);
        left: var(--space-2xl);
    }

    /* Cards */
    .card-content,
    .org-card-content {
        padding: var(--space-lg) var(--space-xl);
    }

    /* Buttons */
    .btn-filled {
        height: var(--btn-height-lg);
        padding: 0 var(--space-xl);
        font-size: var(--text-lg);
    }

    .btn-filter {
        height: var(--btn-height-md);
        font-size: var(--text-base);
    }

    .btn-block {
        height: var(--space-section);
        font-size: var(--text-lg);
        margin-top: var(--space-2xl);
    }

    /* Pills */
    .pills {
        flex-wrap: wrap;
        overflow-x: visible;
        scrollbar-width: auto;
        padding-bottom: 0;
    }

    .pills::-webkit-scrollbar {
        display: block;
    }

    .pill {
        height: var(--btn-height-sm);
        font-size: var(--text-base);
        padding: 0 var(--space-lg);
        flex-shrink: 1;
    }

    .pills-row {
        padding: var(--space-xl) var(--side-padding) 0;
    }

    /* Tags */
    .detail-tags {
        flex-wrap: nowrap;
    }

    .tag {
        height: var(--btn-height-xs);
        font-size: var(--text-sm);
        padding: 0 var(--space-lg);
    }

    /* Search — Figma V2 sets the field and the FILTRAR button side by side,
       the button hard right, rather than stacking them. */
    .search-row {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-lg);
    }

    .search-row .btn-filter {
        align-self: auto;
    }

    /* Filter — Figma V2 keeps the label stacked above its options at every
       breakpoint, so no row flip here. */
    .filter-group {
        gap: var(--space-md);
    }

    .filter-options {
        gap: var(--space-lg);
    }

    .filter-panel--green {
        padding: var(--space-2xl) 0 var(--space-3xl);
    }

    /* Detail pages */
    .detail-top {
        flex-direction: row;
        gap: 0;
        justify-content: space-between;
    }

    .detail-top-right {
        font-size: var(--text-6xl);
    }

    .detail-section {
        margin-bottom: var(--space-section);
    }

    .detail-side-row {
        flex-direction: row;
        padding: var(--space-2xl) 0 var(--space-lg);
    }

    .detail-side-label {
        width: 16.25rem;
        flex-shrink: 0;
        margin-bottom: 0;
    }

    .hero--gallery {
        grid-template-columns: repeat(6, 1fr);
    }

    .tags-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Four columns here, so the first row — and the top rule — spans 4 cells. */
    .tags-grid-cell:nth-child(-n + 2) {
        border-top: none;
    }

    .tags-grid-cell:nth-child(-n + 4) {
        border-top: var(--border-width) solid var(--black);
    }

    .search-filters .search-bar input {
        font-family: var(--font-heading);
        font-size: var(--text-6xl);
    }

    .search-filters .search-row,
    .search-filters .search-bar {
        max-width: none;
    }

    /* Accordion */
    .accordion-title {
        font-size: var(--text-4xl);
    }

    .accordion-body {
        font-size: var(--text-lg);
    }

    /* Calendar */
    .calendar {
        border-radius: var(--radius-lg);
        overflow-x: hidden;
    }

    .calendar-grid {
        min-width: 0;
    }

    .calendar-day {
        min-height: 7.5rem;
        padding: var(--space-sm);
    }

    .calendar-event {
        padding: 0.25rem 0.5rem;
    }

    /* Map */
    .map-container {
        height: 70vh;
        margin: var(--space-2xl) var(--side-padding) 0;
        border-radius: var(--radius-lg);
    }

    .map-popup-wrapper .leaflet-popup-content {
        width: 400px !important;
        max-width: calc(100vw - 80px) !important;
    }

    .map-popup-inner {
        height: 120px;
        min-height: auto;
    }

    .map-popup-img {
        width: 120px;
        min-width: 120px;
    }

    .map-popup-title {
        font-size: var(--text-lg);
    }

    .map-popup-count {
        font-size: var(--text-base);
    }

    /* Partners */
    .partners-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Figma V2 puts both Sobre grids on the same 260px track. */
    .team-grid,
    .partners-grid {
        grid-template-columns: repeat(auto-fill, minmax(16.25rem, 1fr));
    }

    /* About */
    .about-intro {
        flex-direction: row;
        gap: var(--space-2xl);
    }

    /* Misc */
    .intro h1 {
        margin-bottom: var(--space-section);
    }

    .related-section {
        padding-top: var(--space-section);
    }

    .category {
        margin-bottom: var(--space-section);
    }
}

/* ── Mid-tablet+ (≥1000px) ──────────────────── */
@media (min-width: 1000px) {
    .detail-body {
        flex-direction: row;
    }

    .detail-body-aside {
        width: 23.75rem;
    }

    /* Two-up from here: below 1000px a half-width card leaves too little room
       beside the fixed-width thumbnail. */
    .cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ── Desktop+ (≥1200px) ─────────────────────── */
@media (min-width: 1200px) {
    .hero {
        margin: var(--space-section) var(--side-padding) 0;
        min-height: 36.25rem;
    }

    .hero--gallery {
        min-height: 0;
    }

    /* Figma V2 opens up the programme detail page considerably: 153px from the
       image row down to the type label, and 135px from the category pills to
       the first content section. */
    .org-detail-title {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-section);
    }

    /* Mirror the aside width so the logo centres over the contact panel below. */
    .org-detail-logo {
        width: 33.5rem;
        display: flex;
        justify-content: center;
        flex-shrink: 0;
    }

    /* 169px between the search field and the button leaves the field at
       Figma's 1226px across the 1640px content width. */
    .search-row {
        gap: 10.5625rem;
    }

    /* Figma V2 leaves 148px below an expanded answer before the next question,
       against 68px here. */
    .accordion-body {
        padding-bottom: 6.5rem;
    }


    .detail-top {
        padding-top: 9rem;
    }

    .detail-tags {
        padding-top: 2.5rem;
        margin-bottom: 5.625rem;
    }

    .hero-category {
        margin: var(--space-section) var(--side-padding) 0;
        min-height: 36.25rem;
    }

    /* Figma V2 insets the hero title 110px from the left of the banner and
       leaves 99px beneath it. */
    .hero-category-title {
        bottom: 6.1875rem;
        left: 6.875rem;
    }

    .card-thumb,
    .org-card-thumb {
        max-width: none;
    }

    .detail-body {
        gap: var(--space-section);
    }

    .detail-body-aside {
        width: 33.5rem;
    }

    .about-intro {
        gap: var(--space-section);
    }

    /* Figma V2 spaces the category page far more openly: 161px from the hero
       down to the filter button, then 82px on to the card grid. */
    .filter-section {
        margin-top: 0;
        padding-top: 10.0625rem;
        margin-bottom: 2.625rem;
    }

    /* Figma V2: 245x56 with asymmetric internal spacing — 52px before the
       label, 47px to the icon, 21px after it. */
    .btn-filter {
        height: var(--btn-height-lg);
        padding: 0 1.3125rem 0 3.25rem;
        border-radius: calc(var(--btn-height-lg) / 2);
        gap: 2.9375rem;
        font-size: var(--text-lg);
    }

    .btn-filter svg {
        width: 2.4375rem;
        height: 2.4375rem;
    }

    /* Figma V2 filter panel rhythm: 125px/123px inner padding, 102px between
       groups on a row, 74px between rows, 41px radios. */
    .filter-panel {
        column-gap: 6.375rem;
        row-gap: 4.625rem;
        padding: 7.8125rem 0 7.6875rem;
    }

    /* Figma V2 gives the search band its own rhythm: the green starts 110px
       under the subtitle and 52px above the field's text box, then leaves
       113px from the field's rule down to the first filter label and 138px
       below the last radio row. The 52px is banked against .search-bar's own
       16px of top padding, which sits inside the field rather than above it. */
    .results-header {
        margin-bottom: 6.875rem;
    }

    .search-filters {
        padding-top: 2.25rem;
    }

    .filter-panel--green {
        padding: 7.0625rem 0 8.625rem;
    }

    .filter-group {
        gap: 2rem;
    }

    .filter-options {
        gap: 2.9375rem;
    }

    .filter-radio input[type="radio"] {
        width: 2.5625rem;
        height: 2.5625rem;
    }

    /* Figma V2 leaves 161px between a card grid and the next section heading;
       --space-section supplies 80px of that, so the grid tops up the rest. */
    .cards-grid {
        margin-bottom: 5.0625rem;
    }

    /* Figma V2 sizes the section "VER MAIS" pill much larger than the category
       filter pills: 3.5rem tall with a 1.25rem label and generous side padding. */
    .section-header .pill {
        height: var(--btn-height-lg);
        padding: 0 3.375rem;
        border-radius: calc(var(--btn-height-lg) / 2);
        font-size: var(--text-lg);
    }
}