/* ============================================================
   34 — Dedicated "all languages" brochures page
   Scoped to .bp-* so it cannot leak into other pages.
   Markup: resources/views/themes/light/pages/brochures.blade.php

   Card visuals (.dp-card / .dp-flag / .dp-country / .dp-download) are
   intentionally reused from 33-download-presentation.css (already
   loaded site-wide via style.css) to keep this page visually consistent
   with the homepage section — only the page header and grid wrapper
   below are specific to this page.
   ============================================================ */

.bp-section {
    background: #ffffff;
    padding: 70px 0 0 0;
}

.bp-head {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 40px;
}
.bp-head h1 {
    margin: 0 0 10px 0;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.3;
    color: #16351f;
    font-family: "Rubik", sans-serif;
}
.bp-head p {
    margin: 0;
    font-size: 15px;
    color: #6b7a70;
}

/* grid of brochure cards — more items than the homepage strip, so a
   slightly wider min column reads better across many rows */
.bp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 18px;
    /* Clearance for the CTA section right after this page's content
       (see brochures.blade.php) — that CTA reuses the theme's
       .subscribe-container-2 markup, which has a flat, non-responsive
       margin-top: -214px (05-subscribe.css) that pulls it UP into
       whatever precedes it. Without this, the CTA's photo overlaps
       and hides the last row of cards. -214px is the same at every
       breakpoint, so this margin is intentionally flat too, not tiered. */
    margin-bottom: 254px;
}

/* rows with no PDF uploaded yet in the admin module — visibly disabled
   rather than a fake/dead link */
.dp-download--disabled {
    cursor: not-allowed;
    opacity: 0.55;
}
.dp-download--disabled:hover {
    color: var(--primary-color);
    background: rgba(96, 165, 72, 0.08);
}

.bp-empty {
    grid-column: 1 / -1;
    text-align: center;
    color: #6b7a70;
    font-size: 15px;
    padding: 30px 0;
}

/* ---- responsive ---- */
@media (max-width: 1199px) {
    .bp-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}
@media (max-width: 991px) {
    .bp-section { padding-top: 54px; }
    .bp-head { margin-bottom: 30px; }
    .bp-head h1 { font-size: 27px; }
    .bp-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; }
}
@media (max-width: 575px) {
    .bp-section { padding-top: 40px; }
    .bp-head h1 { font-size: 22px; }
    .bp-head p { font-size: 14px; }
    .bp-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}