/* Shared phone-width fixes for graith.co.uk (2026-10-16). Linked from every page after
   the page's own <style>, so these rules win. Desktop layout is untouched. */
@media (max-width: 767.98px) {
    html, body { overflow-x: hidden; }
    img, video, iframe { max-width: 100%; height: auto; }

    /* Header: logo centred above a wrapping, centred nav. The homepage nav was a
       non-wrapping flex row 720px wide, which made phones zoom the whole page out. */
    .header { padding: 12px 0 8px; }
    .header .container { flex-direction: column !important; align-items: center !important; gap: 6px; }
    .header .logo, .header img { height: 40px !important; width: auto !important; }
    .header nav { display: flex !important; flex-wrap: wrap !important; justify-content: center; gap: 0; }
    .header nav a { display: inline-block !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 6px 9px !important; font-size: 14px !important; line-height: 1.3; }

    /* Heroes and titles */
    .hero { padding: 32px 0 20px !important; }
    .hero h1, .article-hero h1, .text-content h1, .text-content h2 { font-size: 27px !important; line-height: 1.25 !important; }
    .text-content h1 span, .text-content h2 span { font-size: 22px !important; }
    .hero p, .article-hero .subtitle { font-size: 16px !important; }
    .article-hero { padding: 36px 0 28px !important; }
    .article-meta { flex-direction: row !important; flex-wrap: wrap; justify-content: center; gap: 8px 18px !important; }
    .langs { line-height: 2; }
    .langs a { margin: 0 5px !important; }
    .lang-banner { font-size: 14px !important; }

    /* Homepage card rows that were fixed three-across */
    .impact-card-container { flex-direction: column; align-items: stretch; }
    .impact-card { width: 100% !important; max-width: none !important; margin: 0 0 15px !important; }

    /* Long code and tables in articles */
    .article-content pre { font-size: 0.8rem; padding: 12px 14px; }
    .article-content pre code { white-space: pre-wrap; word-break: break-word; }
    .article-content table { display: block; overflow-x: auto; }
    .article-container, .article-content { padding-left: 16px; padding-right: 16px; }

    /* Footer: stacked columns, tighter spacing */
    .footer { padding: 28px 16px 20px !important; margin-top: 36px !important; }
    .footer .footer-column, .footer [class*="col-"] { margin-bottom: 16px; }
    .footer .footer-heading, .footer h4 { margin-bottom: 8px !important; }
    .footer p, .footer a { margin-bottom: 6px !important; }
    .footer .copyright { margin-top: 10px !important; }

    /* Contact section on the homepage */
    .get-in-touch .left-panel { margin-bottom: 16px; }
    .preferred-source-block { margin: 20px 16px; }
}