/* =========================================================
   MOBILE POLISH (phones and small tablets)
========================================================= */
html, body { max-width: 100%; overflow-x: clip; }
img, video, iframe { max-width: 100%; }
.section-header, .featured-stories, section { max-width: 100%; }

/* ---- Reports: one report per row on phones (same style as the profile rows) ---- */
@media (max-width: 767.98px) {
    .reports-list { display: block; padding: 14px; }
    .report-item {
        grid-template-columns: 38% 1fr;
        gap: 14px;
        align-items: stretch;
        padding: 0 0 16px;
        margin: 0 0 16px;
    }
    .report-item:last-of-type { margin-bottom: 0; }
    .report-image { height: 100%; min-height: 128px; border-radius: 10px; }
    .report-content { padding: 0; }
    .report-meta { margin-bottom: 8px; gap: 8px; flex-wrap: wrap; }
    .report-category { padding: 6px 10px; font-size: 10px; }
    .report-date { font-size: 11px; }
    .report-title { margin-bottom: 6px; font-size: 16px; line-height: 1.35; }
    .report-title a { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
    .report-description {
        font-size: 13px; line-height: 1.5;
        display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
    }
    .report-bottom { padding-top: 10px; }
    .report-reading { font-size: 12px; }
    .report-reading i { display: none; }
    .report-arrow { width: 32px; height: 32px; flex-basis: 32px; }
    .report-arrow i { font-size: 17px; }
    .reports-explore { padding-top: 4px; }
    .reports-explore-btn { gap: 14px; min-height: 44px; padding: 0 18px; font-size: 13px; }
}
@media (max-width: 359.98px) {
    .report-item { grid-template-columns: 1fr; }
    .report-image { height: 170px; }
}

/* ---- Text that was too small to read on phones ---- */
@media (max-width: 767.98px) {
    .founder-badge { font-size: 9px !important; }
    .founder-date { font-size: 10px !important; }
    .founder-bottom span { font-size: 11px !important; }
    .funding-badge { font-size: 9px !important; }
    .funding-card-title { font-size: 13px !important; line-height: 1.4 !important; }
    .author-date, .author-date span, .related-meta span, .unicorn-related-meta span, .unicorn-main-meta span { font-size: 11px !important; }
    .profile-label { font-size: 10px !important; }
    .profile-description { font-size: 12px !important; line-height: 1.5 !important; }
    .team-info span { font-size: 11px !important; }
    .career-perk-card p { font-size: 12px !important; line-height: 1.55 !important; }
    .advertise-option p { font-size: 12.5px !important; }
    .career-job-title div > span { font-size: 11px !important; }
    .breadcrumb .breadcrumb-item, .breadcrumb .breadcrumb-item a { font-size: 11px; }
    .form-consent span, .about-subscribe-form small { font-size: 11px !important; }
}

/* ---- Breadcrumb: long article titles stay on one line ---- */
@media (max-width: 767.98px) {
    .breadcrumb-bar .breadcrumb { flex-wrap: nowrap; overflow: hidden; }
    .breadcrumb-bar .breadcrumb-item { white-space: nowrap; flex: 0 0 auto; }
    .breadcrumb-bar .breadcrumb-item.active { display: block; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}

/* ---- Buttons and form fields: comfortable to tap, no zoom-in on iPhone ---- */
@media (max-width: 767.98px) {
    input[type="text"], input[type="email"], input[type="tel"], input[type="search"],
    input[type="number"], input[type="url"], select, textarea { font-size: 16px !important; }
    .subscribe-btn { min-height: 34px; }
    .view-all { min-height: 36px; display: inline-flex; align-items: center; }
    .um-btn { min-height: 44px; }
    .type-chips { flex-wrap: nowrap; overflow-x: auto; margin-right: -24px; padding: 0 24px 4px 0; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .type-chips::-webkit-scrollbar { display: none; }
    .type-chips a { flex: 0 0 auto; }
}

/* ---- Advertisement areas never push the page wider than the screen ---- */
.cms-ad-code, .cms-ad-image { max-width: 100%; }
.cms-ad-code iframe, .cms-ad-code ins, .cms-ad-code img { max-width: 100% !important; }
@media (max-width: 575.98px) {
    .brands-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
    .brand-logo-card { min-height: 64px !important; padding: 10px !important; }
}

/* ---- Footer: less empty space on phones ---- */
@media (max-width: 767.98px) {
    .footer-top { padding: 44px 0 34px; }
    .footer-top .row { row-gap: 30px !important; }
    .footer-description { margin-bottom: 20px; }
    .footer-links li { margin-bottom: 11px; }
    .footer-social a { width: 40px; height: 40px; }
}

/* ---- Pop-ups fit small screens ---- */
@media (max-width: 575.98px) {
    .subscribe-modal .modal-dialog { margin: 12px; }
    .subscribe-modal .modal-content { max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); overflow-y: auto; }
    .offcanvas.offcanvas-end { width: min(88vw, 360px); }
}