/* ============================================================
   SECTION 5 — LARGE DESKTOP (1920px+) — ZenBook Fold
   ============================================================ */
@media screen and (min-width: 1920px) {
    .page-wrap {
        max-width: 1440px;
    }

    .content-grid {
        grid-template-columns: 1fr 340px;
        gap: 50px;
    }

    .art-title {
        font-size: 48px;
    }

    .art-body p {
        font-size: 17px;
    }

    .hero-img-wrap img {
        height: 500px;
    }

    .sc-slider {
        height: 380px;
    }

    .sc-title {
        font-size: 42px;
    }

    .rp-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 28px;
    }

    .cards-2x2 {
        gap: 22px;
    }

    .who-h {
        font-size: 22px;
    }

    .who-p {
        font-size: 16px;
    }

    .kf-content h4 {
        font-size: 22px;
    }

    .kf-content p {
        font-size: 15px;
    }
}


/* ============================================================
   SECTION 6 — NEST HUB MAX (1280px × 800px)
   ============================================================ */
@media screen and (min-width: 1200px) and (max-width: 1300px) and (max-height: 820px) {
    .page-wrap {
        max-width: 1200px;
    }

    .content-grid {
        grid-template-columns: 1fr 300px;
        gap: 36px;
    }

    .sc-slider {
        height: 280px;
    }

    .hero-img-wrap img {
        height: 360px;
    }

    .sec-div {
        margin: 14px 0;
    }
}


/* ============================================================
   SECTION 7 — NEST HUB (1024px × 600px)
   ============================================================ */
@media screen and (min-width: 900px) and (max-width: 1199px) and (max-height: 640px) {
    .content-grid {
        grid-template-columns: 1fr 260px !important;
        gap: 20px;
    }

    .hero-img-wrap img {
        height: 190px;
    }

    .sc-slider {
        height: 350px;
    }

    .art-sidebar {
        gap: 12px;
    }

    .sec-div {
        margin: 8px 0;
    }

    .cards-2x2 {
        gap: 10px;
    }

    .coref-card {
        padding: 10px 12px;
        margin-bottom: 8px;
    }

    .art-title {
        font-size: 24px !important;
    }

    .sec-h2 {
        font-size: 17px !important;
    }

    .art-body p {
        font-size: 13.5px !important;
    }

    .toc-sticky {
        top: 8px !important;
    }

    .mob-toc-toggle {
        display: none !important;
    }

    .toc-sticky {
        display: block !important;
    }
}


/* ============================================================
   SECTION 8 — IPAD PRO (1024px – 1199px, tall screens)
   ============================================================ */
@media screen and (min-width: 1024px) and (max-width: 1199px) {
    .page-wrap {
        padding: 0 24px;
    }


    .container-xxl {
        padding: 10px !important;
    }

    .content-grid {
        grid-template-columns: 1fr 280px;
        gap: 28px;
    }

    .toc-sticky {
        display: block !important;
        top: 60px;
    }

    .mob-toc-toggle {
        display: none !important;
    }

    .art-title {
        font-size: clamp(24px, 3vw, 36px);
    }

    .hero-img-wrap img {
        height: 360px;
    }

    .sc-slider {
        height: 350px;
    }

    .cards-2x2 {
        gap: 14px;
    }

    .rp-grid {
        gap: 16px;
    }

    .art-sidebar {
        gap: 18px;
    }
}


/* ============================================================
   SECTION 9 — SURFACE PRO 7 (880px – 1023px)
   ============================================================ */
@media screen and (min-width: 880px) and (max-width: 1023px) {
    .page-wrap {
        padding: 0 20px;
    }

    .container-xxl {
        padding: 10px !important;
    }

    .content-grid {
        grid-template-columns: 1fr !important;
        gap: 28px;
    }

    .toc-sticky {
        display: none !important;
    }

    .mob-toc-toggle {
        display: flex !important;
    }

    .art-sidebar {
        position: relative !important;
        top: auto !important;
        /* flex-direction: row !important;
        flex-wrap: wrap !important; */
        gap: 16px;
    }

    .art-sidebar .sw {
        flex: 1 1 calc(50% - 8px) !important;
        min-width: 240px !important;
    }

    .hero-img-wrap img {
        height: 340px;
    }

    .sc-slider {
        height: 350px;
    }

    .cards-2x2 {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

    .prod-grid {
        grid-template-columns: 1fr 1fr;
    }

    .rp-grid {
        grid-template-columns: 1fr 1fr;
    }

    .art-title {
        font-size: clamp(24px, 3.5vw, 34px);
    }

    .wb-tabs {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .section-top {
        flex-direction: row;
    }

    .author-col {
        width: 45%;
    }

    .form-col {
        width: 55%;
    }

    .section-bottom {
        flex-direction: row;
    }

    .social-col {
        width: 40%;
    }

    .reviews-col {
        width: 60%;
    }
}


/* ============================================================
   SECTION 10 — GALAXY Z FOLD OPEN + IPAD MINI (768px – 879px)
   ============================================================ */
@media screen and (min-width: 768px) and (max-width: 879px) {
    .page-wrap {
        padding: 0 18px;
    }

    .container-xxl {
        padding: 10px !important;
    }

    .content-grid {
        grid-template-columns: 1fr !important;
        gap: 24px;
    }

    .toc-sticky {
        display: none !important;
    }

    .mob-toc-toggle {
        display: flex !important;
    }

    .art-sidebar {
        position: relative !important;
        top: auto !important;
        /* flex-direction: row !important;
        flex-wrap: wrap !important; */
        gap: 14px;
        order: -1;
    }

    .art-sidebar .sw {
        flex: 1 1 calc(50% - 7px) !important;
        min-width: 200px !important;
    }

    .hero-img-wrap img {
        height: 300px;
    }

    .sc-slider {
        height: 340px;
    }

    .cards-2x2 {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .prod-grid {
        grid-template-columns: 1fr 1fr;
    }

    .rp-grid {
        grid-template-columns: 1fr 1fr;
    }

    .art-title {
        font-size: clamp(22px, 4vw, 30px);
    }

    .wb-tabs {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 10px;
    }

    .wb-tab {
        padding: 12px 10px;
    }

    .wb-h {
        font-size: 14px;
    }

    .wb-p {
        font-size: 11px;
    }

    .section-top {
        flex-direction: column !important;
        gap: 20px;
        padding: 20px 18px;
    }

    .author-col {
        width: 100% !important;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, .2);
        padding-bottom: 18px;
    }

    .form-col {
        width: 100% !important;
        padding-left: 0;
    }

    .section-bottom {
        flex-direction: column !important;
    }

    .social-col {
        width: 100% !important;
        border-right: none;
        padding-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, .15);
        padding-bottom: 16px;
        margin-bottom: 16px;
    }

    .reviews-col {
        width: 100% !important;
        padding-left: 0;
    }

    .reviews-scroll {
        height: 220px;
    }

    .setup-list {
        padding: 18px;
    }

    .sum-btn {
        font-size: 15px;
        height: 44px;
    }
}


/* ============================================================
   SECTION 11 — SURFACE DUO (540px – 767px)
   ============================================================ */
@media screen and (min-width: 540px) and (max-width: 767px) {
    .page-wrap {
        padding: 0 16px;
    }

    .container-xxl {
        padding: 10px !important;
    }

    .content-grid {
        grid-template-columns: 1fr !important;
        gap: 20px;
    }

    .toc-sticky {
        display: none !important;
    }

    .mob-toc-toggle {
        display: flex !important;
    }

    .art-sidebar {
        position: relative !important;
        top: auto !important;
        /* flex-direction: row !important;
        flex-wrap: wrap !important; */
        gap: 12px;
        margin-top: 15px !important;
    }

    .art-sidebar .sw {
        flex: 1 1 calc(50% - 6px) !important;
        min-width: 200px !important;
    }

    .hero-img-wrap img {
        height: 240px;
    }

    .sc-slider {
        height: 320px;
    }

    .sc-title {
        font-size: clamp(17px, 4vw, 22px);
    }

    .art-title {
        font-size: clamp(20px, 4.5vw, 27px);
    }

    .sec-h2 {
        font-size: clamp(17px, 3.5vw, 22px);
    }

    .cards-2x2 {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .prod-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .rp-grid {
        grid-template-columns: 1fr 1fr;
        gap: 14px;
    }

    .wb-tabs {
        grid-template-columns: 1fr !important;
        gap: 10px;
    }

    .section-top {
        flex-direction: column !important;
        padding: 20px 16px !important;
    }

    .author-col {
        width: 100% !important;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, .2);
        padding-bottom: 16px;
    }

    .form-col {
        width: 100% !important;
        padding-left: 0;
    }

    .section-bottom {
        flex-direction: column !important;
        padding: 18px 16px !important;
    }

    .social-col {
        width: 100% !important;
        border-right: none;
        padding-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, .15);
        padding-bottom: 16px;
        margin-bottom: 16px;
    }

    .reviews-col {
        width: 100% !important;
        padding-left: 0;
    }

    .grad-cta {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }

    .dld-card {
        flex-direction: column;
        gap: 14px;
        padding: 18px 16px;
    }

    .dld-pills {
        flex-direction: column;
        gap: 8px;
    }

    .sum-actions {
        flex-direction: column;
        gap: 10px;
        align-items: stretch;
    }

    .sum-btn {
        width: 100%;
        text-align: center;
        justify-content: center;
        height: 48px;
    }

    .toc-fab {
        left: 16px;
        bottom: 20px;
        font-size: 13px;
        padding: 0 14px;
        height: 40px;
    }

    .toc-popup {
        left: 14px;
        right: 14px;
        width: auto;
    }

    .ms-5 {
        margin-left: 0 !important;
        margin-top: 12px !important;
    }
}


/* ============================================================
   SECTION 12 — ALL PHONES (max 539px)
   iPhone SE/12/14/Pixel 7/Galaxy S8+/S20 Ultra
   ============================================================ */
@media screen and (max-width: 539px) {


    .avatar-outer::before {
        display: none !important;
    }

    .verified-badge {
        position: absolute;
        bottom: 20px;
        left: 60px;
        width: 24px;
        height: 24px;
        background: var(--grad);
        border-radius: 50%;
        border: 2.5px solid #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 3;
        animation: popIn .5s cubic-bezier(.34, 1.56, .64, 1) both;
        animation-delay: .4s;
    }

    /* LAYOUT */
    .page-wrap {
        padding: 0 14px !important;
    }

    .container-xxl {
        padding: 10px !important;
    }

    .content-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    /* SIDEBAR */
    .toc-sticky {
        display: none !important;
    }

    .mob-toc-toggle {
        display: flex !important;
    }

    .art-sidebar {
        position: relative !important;
        top: auto !important;
        /* flex-direction: column !important; */
        gap: 14px !important;
        width: 100% !important;
    }

    .art-sidebar .sw {
        flex: 1 1 100% !important;
        margin-top: 15px !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    /* AD BANNERS */
    .ad-header-banner-wrap {
        padding: 8px 0;
    }

    .ad-banner-1200 {
        height: 120px;
        border-radius: 8px;
    }

    .ad-banner-btn {
        display: none !important;
    }

    .ad-banner-badge {
        font-size: 9px;
        padding: 3px 7px;
    }

    .ad-banner-cta-text {
        font-size: 12px;
    }

    .ad-banner-overlay {
        padding: 0 12px;
        gap: 8px;
    }

    .ad-label {
        font-size: 8px;
        letter-spacing: 1px;
    }

    .ad-in-article-banner {
        height: 110px;
        border-radius: 8px;
    }

    .ad-in-article-banner .ad-banner-btn {
        display: none !important;
    }

    .ad-placeholder {
        width: 100% !important;
    }

    .sw-ad-square .ad-placeholder,
    .sw-ad-1 .ad-placeholder {
        height: 180px;
    }

    .sw-ad-strip .ad-placeholder,
    .sw-ad-2 .ad-placeholder {
        height: 80px;
    }

    .sw-ad-tall .ad-placeholder,
    .sw-ad-5 .ad-placeholder {
        height: 250px;
    }

    .sw-ad-3 .ad-placeholder,
    .sw-ad-4 .ad-placeholder,
    .sw-ad-6 .ad-placeholder,
    .sw-ad-8 .ad-placeholder,
    .sw-ad-10 .ad-placeholder {
        height: 180px;
    }

    .sw-ad-7 .ad-placeholder {
        height: 90px;
    }

    .sw-ad-9 .ad-placeholder {
        height: 180px;
    }

    /* BREADCRUMB */
    .bc-wrap {
        padding: 7px 0;
    }

    .breadcrumb {
        font-size: 12px;
    }

    .breadcrumb-item a {
        font-size: 12px;
    }

    .breadcrumb-item.active {
        font-size: 12px;
    }

    /* TITLE + META */
    .art-title {
        font-size: clamp(18px, 5.5vw, 24px) !important;
        line-height: 1.25;
    }

    .art-title .part1,
    .art-title .part2 {
        display: block;
    }

    .art-meta-bar {
        flex-wrap: wrap;
        gap: 5px 8px;
        margin-bottom: 10px;
    }

    .auth-sm-av {
        width: 26px;
        height: 26px;
        font-size: 10px;
    }

    .auth-sm-name {
        font-size: 12px;
    }

    .meta-date {
        font-size: 11px;
    }

    .meta-sep {
        display: none;
    }

    .wc-btn {
        font-size: 11px;
        padding: 3px 9px;
    }

    .wc-content {
        font-size: 13px;
    }

    .wc-content.wc-open {
        padding: 10px 12px;
        margin-bottom: 18px;
    }

    /* DISCLOSURE */
    .disclosure-box {
        margin-left: 0 !important;
        padding-left: 12px !important;
        font-size: 12px;
        margin-top: 8px;
        width: 100%;
    }

    /* HERO */
    .hero-img-wrap {
        border-radius: 10px;
        margin-bottom: 18px;
    }

    .hero-img-wrap img {
        height: 190px;
    }

    /* BODY TEXT */
    .art-body p {
        font-size: 14px !important;
        letter-spacing: 0.01rem;
        line-height: 1.65;
    }

    .art-body strong {
        font-size: 16px;
    }

    .sec-h2 {
        font-size: clamp(16px, 4.5vw, 20px);
        margin-bottom: 10px;
        padding-bottom: 8px;
    }

    .sec-h3 {
        font-size: 15px;
    }

    /* POLL */
    .poll-box {
        padding: 14px 12px;
        border-radius: 12px;
    }

    .poll-title {
        font-size: 14px;
    }

    .poll-q {
        font-size: 13.5px;
    }

    .poll-option {
        font-size: 13px;
        padding: 10px 12px;
        border-radius: 8px;
    }

    .poll-footer {
        font-size: 12px;
        margin-top: 8px;
    }

    /* COMPARISON SLIDER */
    .setup-compare {
        padding: 14px 12px;
        border-radius: 12px;
    }

    .sc-title {
        font-size: clamp(14px, 4.5vw, 18px) !important;
    }

    .sc-slider {
        height: 350px;
        border-radius: 10px;
    }

    .sc-pill {
        font-size: 10px;
        padding: 5px 9px;
        top: 9px;
    }

    .sc-pill-left {
        left: 9px;
    }

    .sc-pill-right {
        right: 9px;
    }

    .sc-knob {
        width: 34px;
        height: 34px;
    }

    .sc-knob i {
        font-size: 12px;
    }

    .sc-cards {
        grid-template-columns: 1fr !important;
        gap: 10px;
        margin-top: 12px;
    }

    .sc-card {
        padding: 12px 14px;
    }

    .sc-card-title {
        font-size: 14px;
    }

    .sc-list li {
        font-size: 13px;
    }

    /* QUICK ANSWER */
    .qa-card {
        padding: 14px 12px 12px;
        border-radius: 12px;
        margin: 14px 0 18px;
    }

    .qa-title {
        font-size: 16px;
    }

    .qa-text {
        font-size: 13px;
        line-height: 1.65;
    }

    .qa-icon {
        width: 30px;
        height: 30px;
    }

    /* QUICK QUESTION */
    .qq2-box {
        padding: 14px 12px 12px;
        border-radius: 12px;
    }

    .qq2-title {
        font-size: 16px;
    }

    .qq2-q {
        font-size: 13px;
    }

    .qq2-opt {
        padding: 11px 10px;
        margin-bottom: 8px;
        border-radius: 8px;
    }

    .qq2-label {
        font-size: 13px;
    }

    .qq2-pct {
        font-size: 12px;
    }

    .qq2-msg {
        font-size: 13px;
        padding: 12px 12px;
    }

    /* CARDS 2x2 */
    .cards-2x2 {
        grid-template-columns: 1fr !important;
        gap: 10px;
    }

    .i-card {
        padding: 14px 12px;
        border-radius: 10px;
    }

    .i-card-icon {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }

    .i-card h5 {
        font-size: 15px;
    }

    .i-card p {
        font-size: 13.5px;
    }

    /* DID YOU KNOW (blue box) */
    .didyouknow {
        padding: 12px 12px;
        gap: 10px;
        border-radius: 10px;
    }

    .dyk-title {
        font-size: 16px;
    }

    .dyk-desc {
        font-size: 13px;
    }

    .dyk-ic {
        width: 30px;
        height: 30px;
        border-radius: 8px;
    }

    /* DID YOU KNOW (expandable) */
    .dyk-wrap {
        margin: 8px 0 14px;
    }

    .dyk-btn {
        padding: 11px 12px;
        border-radius: 9px;
    }

    .dyk-text {
        font-size: 13px;
        white-space: normal;
        overflow: visible;
    }

    .dyk-body {
        font-size: 13px;
        padding: 10px 12px 12px;
    }

    /* CORE FEATURES */
    .coref-wrap {
        margin: 0 0 20px;
    }

    .coref-title {
        font-size: 20px;
    }

    .coref-card {
        padding: 12px 12px;
        margin-bottom: 10px;
        border-radius: 8px;
    }

    .coref-h {
        font-size: 16px;
    }

    .coref-p {
        font-size: 13px;
    }

    /* WHERE TABS */
    .wb-tabs-wrap {
        overflow: hidden;
    }

    .wb-tabs {
        grid-template-columns: 1fr !important;
        gap: 8px;
    }

    .wb-tab {
        padding: 12px 12px;
        border-radius: 10px;
        gap: 10px;
    }

    .wb-ic {
        width: 38px;
        height: 38px;
        border-radius: 10px;
    }

    .wb-ic i {
        font-size: 16px;
    }

    .wb-h {
        font-size: 14px;
    }

    .wb-p {
        font-size: 12px;
    }

    .wb-panel-card {
        padding: 14px 12px;
        border-radius: 10px;
    }

    .wb-panel-title {
        font-size: 17px;
    }

    .wb-panel-text {
        font-size: 13.5px;
    }

    .wb-rf-txt {
        font-size: 13px;
    }

    .wb-note {
        font-size: 13px;
        padding: 12px 12px;
    }

    .wb-mini-title {
        font-size: 13px;
    }

    .wb-mini-sub {
        font-size: 12px;
    }

    /* WHO SECTION */
    .who-list {
        gap: 10px;
    }

    .who-item {
        padding: 13px 12px;
        border-radius: 12px;
        gap: 12px;
    }

    .who-n {
        width: 36px;
        height: 36px;
        font-size: 13px;
        flex-shrink: 0;
    }

    .who-h {
        font-size: 16px;
    }

    .who-p {
        font-size: 13.5px;
    }

    .who-tip {
        padding: 14px 12px;
        gap: 10px;
        border-radius: 12px;
    }

    .who-tip-ic {
        width: 30px;
        height: 30px;
    }

    .who-tip-h {
        font-size: 16px;
    }

    .who-tip-p {
        font-size: 13.5px;
    }

    .who-cta {
        padding: 16px 14px;
        border-radius: 14px;
    }

    .who-cta-top {
        gap: 10px;
        align-items: flex-start;
    }

    .who-cta-ic {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }

    .who-cta-h {
        font-size: 16px;
    }

    .who-cta-p {
        font-size: 13.5px;
    }

    .who-cta-btn {
        font-size: 12px;
        padding: 8px 14px;
        display: inline-block;
    }

    .ms-5 {
        margin-left: 0 !important;
        margin-top: 10px !important;
    }

    /* KEY FEATURES */
    .kf-sub {
        font-size: 13.5px;
    }

    .kf-list {
        gap: 18px;
    }

    .kf-item {
        gap: 12px;
    }

    .kf-content h4 {
        font-size: 15px;
        margin-bottom: 6px;
    }

    .kf-content p {
        font-size: 13px;
    }

    /* CHECKLIST */
    .qb-wrap {
        padding: 14px 12px 12px;
        border-radius: 12px;
    }

    .qb-head {
        padding: 4px 4px 10px;
    }

    .qb-title {
        font-size: 16px;
    }

    .qb-count {
        font-size: 11px;
        padding: 5px 8px;
    }

    .qb-item {
        padding: 12px 10px;
        border-radius: 8px;
        gap: 10px;
    }

    .qb-main {
        font-size: 14px !important;
    }

    .qb-sub {
        font-size: 12.5px !important;
    }

    .qb-btn {
        font-size: 13px;
        padding: 10px 14px;
        max-width: 100%;
        width: 100%;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }

    .qb-btn .fs-3 {
        font-size: 1rem !important;
    }

    /* MYTHS */
    .myth-card {
        padding: 12px 12px;
        margin-bottom: 10px;
        border-radius: 10px;
    }

    .myth-badge {
        font-size: 13px;
    }

    .myth-card p {
        font-size: 13px;
    }

    /* READER EXPERIENCE */
    .reader-exp {
        padding: 13px 14px;
        border-radius: 10px;
    }

    .reader-text {
        font-size: 13px;
    }

    .reader-link {
        font-size: 13.5px;
    }

    /* DEALS DOWNLOAD CARD */
    .dld-border-wrap {
        margin-top: 16px;
    }

    .dld-card {
        flex-direction: row;
        gap: 12px;
        padding: 14px 12px;
    }

    .dld-icon {
        width: 40px;
        height: 40px;
        font-size: 17px;
    }

    .dld-title {
        font-size: 12.5px;
    }

    .dld-text {
        font-size: 11.5px;
        margin-bottom: 10px;
    }

    .dld-live {
        font-size: 9px;
        padding: 2px 7px;
    }

    .dld-savings {
        display: none;
    }

    .dld-pills {
        flex-wrap: wrap;
        gap: 6px;
    }

    .dld-pill {
        font-size: 11px;
        padding: 6px 12px;
    }

    /* SETUP STEPS */
    .setup-list {
        padding: 14px 12px;
        border-radius: 14px;
    }

    .setup-item {
        gap: 12px;
        padding: 11px 0;
    }

    .step-n {
        width: 36px;
        height: 36px;
        font-size: 14px;
        flex-shrink: 0;
    }

    .step-title {
        font-size: 15px;
    }

    .step-desc {
        font-size: 13px;
    }

    /* IN SUMMARY */
    .sum-wrap {
        padding: 16px 14px;
        border-radius: 12px;
    }

    .sum-title {
        font-size: 20px;
        margin-bottom: 10px;
    }

    .sum-p {
        font-size: 13.5px !important;
    }

    .sum-actions {
        flex-direction: column;
        gap: 8px;
        align-items: stretch;
    }

    .sum-btn {
        width: 100%;
        justify-content: center;
        text-align: center;
        height: 46px;
        font-size: 14px;
    }

    /* FAQ */
    .faq-item {
        border-radius: 8px;
        margin-bottom: 7px;
    }

    .faq-q {
        padding: 12px 12px;
        font-size: 14px;
    }

    .faq-q .faq-arrow {
        font-size: 14px;
    }

    .faq-a {
        padding: 0 12px 12px;
        font-size: 13px;
    }

    /* AUTHOR/REVIEW CARD */
    .section-wrap {
        overflow: hidden;
    }

    .meta-bar {
        gap: 4px 10px;
    }

    .meta-bar span {
        font-size: 11px;
    }

    .main-card {
        border-radius: 14px;
    }

    .section-top {
        flex-direction: column !important;
        padding: 16px 14px !important;
        gap: 16px;
    }

    .author-col {
        width: 100% !important;
        border-right: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, .15);
        padding-bottom: 16px;
        flex-direction: column !important;
        align-items: center !important;
    }

    .form-col {
        width: 100% !important;
        padding-left: 0 !important;
    }

    .form-title {
        font-size: 15px;
    }

    .form-sub {
        font-size: 12px;
    }

    .f-input {
        font-size: 13px;
        padding: 9px 12px;
    }

    .submit-btn {
        font-size: 13px;
        padding: 9px 18px;
    }

    .section-bottom {
        flex-direction: column !important;
        padding: 16px 14px !important;
    }

    .social-col {
        width: 100% !important;
        border-right: none !important;
        padding-right: 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, .15);
        padding-bottom: 16px;
        margin-bottom: 16px;
    }

    .reviews-col {
        width: 100% !important;
        padding-left: 0 !important;
    }

    .reviews-scroll {
        height: 200px;
    }

    .avatar-outer {
        width: 80px;
        height: 80px;
    }

    .avatar-outer img {
        width: 74px;
        height: 74px;
    }

    .a-name {
        font-size: 15px;
    }

    .a-bio {
        font-size: 12px !important;
    }

    .a-role {
        font-size: 11px;
    }

    .profile-btn {
        font-size: 12px;
        padding: 5px 14px;
    }

    .badges-grid {
        gap: 4px;
    }

    .abadge {
        font-size: 11px;
        padding: 3px 9px;
    }

    .r-top {
        flex-wrap: wrap;
        gap: 5px;
    }

    .r-name {
        font-size: 13px;
    }

    .r-prod-badge {
        font-size: 10px;
    }

    .r-text {
        font-size: 12px;
    }

    .r-avatar {
        width: 26px;
        height: 26px;
    }

    .affiliate-box {
        font-size: 12px;
        padding: 10px 12px;
    }

    /* SOCIAL BUTTONS */
    .social-buttons {
        gap: 6px;
        flex-wrap: wrap;
    }

    .social-btn {
        font-size: 12px;
        padding: 6px 10px;
    }

    /* GRADIENT CTA */
    .grad-cta {
        padding: 14px 14px;
        flex-direction: column;
        gap: 12px;
        text-align: center;
        border-radius: 10px;
    }

    .grad-cta-text {
        font-size: 13px;
    }

    /* PRODUCT GRID */
    .prod-grid {
        grid-template-columns: 1fr !important;
        gap: 12px;
    }

    .prod-img {
        height: 140px;
    }

    .prod-name {
        font-size: 13px;
    }

    .prod-price {
        font-size: 15px;
    }

    .prod-desc {
        font-size: 12px;
    }

    /* RECOMMENDED PICKS */
    .rp-subhead {
        font-size: 19px;
    }

    .rp-grid {
        grid-template-columns: 1fr !important;
        gap: 14px;
    }

    .rp-card {
        padding: 14px 14px;
        border-radius: 12px;
    }

    .rp-pill {
        font-size: 12px;
        height: 24px;
        padding: 0 10px;
    }

    .rp-name {
        font-size: 17px;
    }

    .rp-stars {
        font-size: 16px;
    }

    .rp-k {
        font-size: 13px;
    }

    .rp-v {
        font-size: 13px;
    }

    .rp-btn {
        font-size: 13.5px;
        padding: 10px 12px;
    }

    /* MISC */
    .highlight-box {
        padding: 12px 12px;
        font-size: 13px;
    }

    /* TOC + FAB */
    .mob-toc-toggle {
        font-size: 13px;
        padding: 9px 12px;
        margin-bottom: 16px;
    }

    .mob-toc-drawer .toc-list li a {
        font-size: 12.5px;
        padding: 8px 14px;
    }

    .toc-fab {
        left: 14px;
        bottom: 18px;
        height: 40px;
        padding: 0 14px;
        font-size: 13px;
        gap: 6px;
    }

    .toc-fab i {
        font-size: 14px !important;
    }

    .toc-popup {
        left: 12px;
        right: 12px;
        width: auto;
        bottom: 70px;
    }

    .toc-popup-head h4 {
        font-size: 13px;
    }

    .toc-popup-list li a {
        font-size: 12.5px;
        padding: 7px 12px;
    }

    /* CIRCULAR PROGRESS */
    .circ-progress-wrap {
        right: 12px;
        bottom: 70px;
        width: 52px;
        height: 52px;
    }

    .circ-progress-wrap svg {
        width: 52px;
        height: 52px;
    }

    .circ-pct-label {
        font-size: 12.5px;
        margin: 8px;
    }

    /* SIDEBAR WIDGETS */
    .sw {
        border-radius: 16px;
    }

    .sw-deals-header {
        padding: 12px 14px;
        gap: 10px;
    }

    .sw-deals-icon {
        width: 36px;
        height: 36px;
        font-size: 16px;
        border-radius: 10px;
    }

    .sw-deals-htxt strong {
        font-size: 13px;
    }

    .sw-deals-body {
        padding: 12px 14px 14px;
    }

    .sw-deals-off {
        padding: 11px 14px;
        border-radius: 10px;
        margin-bottom: 10px;
    }

    .sw-deals-off-pct {
        font-size: 26px;
    }

    .sw-deals-off-txt {
        font-size: 11px;
    }

    .sw-deal-item {
        padding: 8px 10px;
        border-radius: 9px;
        margin-bottom: 6px;
        gap: 9px;
    }

    .sw-deal-emoji {
        font-size: 18px;
    }

    .sw-deal-name {
        font-size: 12.5px;
        max-width: 120px;
    }

    .sw-deal-price {
        font-size: 11px;
        max-width: 120px;
    }

    .sw-deal-tag {
        font-size: 11px;
    }

    .sw-deals-btn {
        font-size: 13px;
        padding: 10px;
        border-radius: 10px;
        margin-top: 12px;
    }

    .sw-quiz-inner {
        padding: 18px 16px;
    }

    .sw-quiz-badge {
        font-size: 10px;
        padding: 3px 9px;
    }

    .sw-quiz-headline {
        font-size: 15px;
    }

    .sw-quiz-sub {
        font-size: 11.5px;
        margin-bottom: 14px;
    }

    .sw-qstep {
        padding: 7px 10px;
        border-radius: 9px;
        gap: 8px;
    }

    .sw-qstep-n {
        width: 22px;
        height: 22px;
        font-size: 10px;
    }

    .sw-qstep-t {
        font-size: 11.5px;
    }

    .sw-quiz-btn {
        font-size: 12.5px;
        padding: 11px;
        border-radius: 10px;
    }

    .sw-quiz-proof {
        font-size: 10px;
        margin-top: 8px;
    }

    .sw-compare-head {
        padding: 12px 14px;
        gap: 8px;
    }

    .sw-compare-head-icon {
        width: 30px;
        height: 30px;
        font-size: 13px;
    }

    .sw-compare-head strong {
        font-size: 13px;
    }

    .sw-compare-body {
        padding: 14px 14px 16px;
    }

    .sw-compare-slot {
        padding: 10px 6px;
        font-size: 10px;
        border-radius: 10px;
    }

    .sw-compare-vs {
        font-size: 10px;
    }

    .sw-cfeat {
        font-size: 10px;
        padding: 8px 4px;
    }

    .sw-compare-btn {
        font-size: 12px;
        padding: 9px;
    }

    .sw-chat-inner {
        padding: 16px 16px 18px;
    }

    .sw-chat-av {
        width: 30px;
        height: 30px;
        font-size: 10px;
    }

    .sw-chat-title {
        font-size: 15px;
    }

    .sw-chat-desc {
        font-size: 11px;
        margin-bottom: 12px;
    }

    .sw-chat-stats {
        padding: 10px 6px;
        margin-bottom: 12px;
        border-radius: 11px;
    }

    .sw-cstat-v {
        font-size: 15px;
    }

    .sw-cstat-l {
        font-size: 9px;
    }

    .sw-chat-btn {
        font-size: 13px;
        padding: 12px;
        border-radius: 11px;
    }
}


/* ============================================================
   SECTION 13 — IPHONE SE EXTRA SMALL (max 375px)
   ============================================================ */
@media screen and (max-width: 375px) {
    /* .page-wrap {
        padding: 0 12px !important;
    } */

    .container-xxl {
        padding: 10px !important;
    }

    .art-title {
        font-size: 18px !important;
    }

    .sec-h2 {
        font-size: 15px !important;
    }

    .art-body p {
        font-size: 13.5px !important;
    }

    .hero-img-wrap img {
        height: 170px;
    }

    .sc-slider {
        height: 350px;
    }

    .sc-title {
        font-size: 13px !important;
    }

    .sc-pill {
        font-size: 9px !important;
        padding: 4px 7px;
    }

    .cards-2x2 {
        grid-template-columns: 1fr !important;
    }

    .i-card h5 {
        font-size: 14px;
    }

    .coref-h {
        font-size: 14.5px;
    }

    .coref-p {
        font-size: 12.5px;
    }

    .who-h {
        font-size: 15px;
    }

    .who-p {
        font-size: 13px;
    }

    .kf-content h4 {
        font-size: 14.5px;
    }

    .kf-content p {
        font-size: 12.5px;
    }

    .step-title {
        font-size: 14px;
    }

    .step-n {
        width: 32px;
        height: 32px;
        font-size: 13px;
    }

    .sum-title {
        font-size: 18px;
    }

    .faq-q {
        font-size: 13px;
        padding: 11px 12px;
    }

    .toc-fab {
        height: 38px;
        padding: 0 12px;
        font-size: 12px;
    }

    .sw-deals-off-pct {
        font-size: 22px;
    }

    .sw-quiz-headline {
        font-size: 14px;
    }

    .sw-chat-title {
        font-size: 14px;
    }
}


/* ============================================================
   SECTION 14 — GALAXY Z FOLD FOLDED (max 360px)
   ============================================================ */
@media screen and (max-width: 360px) {
    .page-wrap {
        padding: 0 10px !important;
    }

    .container-xxl {
        padding: 10px !important;
    }

    .art-title {
        font-size: 17px !important;
        line-height: 1.3;
    }

    .hero-img-wrap img {
        height: 145px;
    }

    .sc-slider {
        height: 350px;
    }

    .sc-title {
        font-size: 13px !important;
    }

    .sc-pill {
        font-size: 9px !important;
        padding: 4px 7px;
    }

    .cards-2x2 {
        grid-template-columns: 1fr !important;
    }

    .rp-grid {
        grid-template-columns: 1fr !important;
    }

    .prod-grid {
        grid-template-columns: 1fr !important;
    }

    .wb-tabs {
        grid-template-columns: 1fr !important;
        gap: 7px;
    }

    .wb-h {
        font-size: 13px;
    }

    .setup-list {
        padding: 12px 10px;
    }

    .step-title {
        font-size: 14px;
    }

    .step-n {
        width: 30px;
        height: 30px;
        font-size: 12px;
    }

    .sum-title {
        font-size: 17px;
    }

    .faq-q {
        font-size: 12.5px;
        padding: 10px 10px;
    }

    .faq-a {
        font-size: 12.5px;
        padding: 0 10px 10px;
    }

    .toc-fab {
        padding: 0 10px;
        height: 36px;
        font-size: 12px;
    }

    .qb-item {
        padding: 10px 10px;
        gap: 8px;
    }

    .qb-main {
        font-size: 12.5px !important;
    }

    .qb-sub {
        font-size: 11.5px !important;
    }

    .who-n {
        width: 30px;
        height: 30px;
        font-size: 12px;
    }

    .who-h {
        font-size: 14px;
    }

    .who-p {
        font-size: 12.5px;
    }

    .kf-content h4 {
        font-size: 13.5px;
    }

    .kf-content p {
        font-size: 12px;
    }

    .dld-card {
        flex-direction: column;
        padding: 10px 10px;
    }

    .dld-pill {
        font-size: 10px;
        padding: 5px 10px;
    }

    .sw-deals-off-pct {
        font-size: 20px;
    }

    .sw-quiz-headline {
        font-size: 13.5px;
    }

    .sw-chat-title {
        font-size: 13.5px;
    }
}


/* ============================================================
   SECTION 15 — LANDSCAPE PHONES (height < 500px)
   ============================================================ */
@media screen and (max-width: 932px) and (orientation: landscape) and (max-height: 500px) {

    html,
    body {
        overflow-x: hidden !important;
    }

    .page-wrap {
        padding: 0 16px !important;
    }

    .container-xxl {
        padding: 10px !important;
    }

    .content-grid {
        grid-template-columns: 1fr !important;
    }

    .toc-sticky {
        display: none !important;
    }

    .mob-toc-toggle {
        display: flex !important;
    }

    .art-sidebar {
        position: relative !important;
        top: auto !important;
        /* flex-direction: row !important;
        flex-wrap: wrap !important; */
        gap: 12px;
    }

    .art-sidebar .sw {
        flex: 1 1 calc(50% - 6px) !important;
    }

    .hero-img-wrap img {
        height: 165px;
    }

    .sc-slider {
        height: 350px;
    }

    .art-title {
        font-size: clamp(16px, 3.5vw, 22px) !important;
    }

    .cards-2x2 {
        grid-template-columns: 1fr 1fr;
    }

    .sum-actions {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .sum-btn {
        flex: 1;
        min-width: 110px;
    }

    .circ-progress-wrap {
        right: 10px;
        bottom: 56px;
        width: 48px;
        height: 48px;
    }

    .toc-fab {
        left: 12px;
        bottom: 14px;
        height: 36px;
        padding: 0 12px;
    }
}


/* ============================================================
   SECTION 16 — PRINT
   ============================================================ */
@media print {

    .toc-fab,
    .circ-progress-wrap,
    #scrollProgressBar,
    .toc-popup,
    .mob-toc-toggle,
    .art-sidebar,
    .ad-header-banner-wrap,
    .ad-in-article-wrap {
        display: none !important;
    }

    html,
    body {
        overflow: visible !important;
    }

    .content-grid {
        grid-template-columns: 1fr !important;
    }

    .page-wrap {
        max-width: 100%;
        padding: 0 16px;
    }

    .art-body p {
        color: #000 !important;
        font-size: 12pt;
    }

    .sec-h2 {
        color: #000 !important;
    }

    a {
        color: #000 !important;
        text-decoration: underline;
    }
}

/* ================================================================
   FIXES.CSS — Targeted fixes for specific device issues
   Load AFTER responsive.css:

   <link rel="stylesheet" href="overflow-fix.css">
   <link rel="stylesheet" href="where-why.css">
   <link rel="stylesheet" href="responsive.css">
   <link rel="stylesheet" href="fixes.css">
   ================================================================ */


/* ================================================================
   FIX 1 — CORE RULE (All non-desktop screens < 1200px)

   Problem: Sidebar widgets appear BESIDE article content on
   tablets / Surface Duo / iPad Pro etc. instead of AFTER it.

   Solution: Force sidebar to always render AFTER the article body
   by pushing it to order: 2, and the article to order: 1.
   Also make sidebar full-width and stacked vertically.
   ================================================================ */

@media screen and (max-width: 1199px) {

    /* Single-column layout — no sidebar beside article */
    .content-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 24px;
    }

    /* Article body always comes first */
    .art-body-wrap,
    .art-main,
    .article-main,
    article,
    .art-content {
        order: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Sidebar always comes LAST — after article */
    .art-sidebar {
        order: 2 !important;
        position: static !important;
        top: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        /* flex-direction: column !important; */
        gap: 16px;
    }

    /* Each sidebar widget: full width */
    .art-sidebar>.sw,
    .art-sidebar>* {
        width: 100% !important;
        max-width: 100% !important;
        flex: unset !important;
        min-width: 0 !important;
    }

    /* Hide desktop sticky TOC */
    .toc-sticky {
        display: none !important;
    }

    /* Show mobile TOC toggle */
    .mob-toc-toggle {
        display: flex !important;
    }
}


/* ================================================================
   FIX 2 — IPAD PRO (1024px – 1199px)

   Problem (Images 4 & 5): Sidebar visible beside article — should
   be full width below article on iPad Pro since 1024px is too
   narrow for a proper 2-column layout with sidebar.
   ================================================================ */

@media screen and (min-width: 1024px) and (max-width: 1199px) {
    .content-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 28px;
    }

    .art-sidebar {
        order: 2 !important;
        position: static !important;
        top: auto !important;
        width: 100% !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 16px;
    }

    /* iPad Pro: 2 widgets per row */
    .art-sidebar>.sw {
        flex: 1 1 calc(50% - 8px) !important;
        min-width: 260px !important;
        max-width: calc(50% - 8px) !important;
    }

    /* Full-width widgets (deals, quiz — these are tall) */
    .art-sidebar>.sw-deals,
    .art-sidebar>.sw-quiz {
        flex: 1 1 calc(50% - 8px) !important;
    }

    /* TOC back to inline toggle (no sticky sidebar) */
    .toc-sticky {
        display: none !important;
    }

    .mob-toc-toggle {
        display: flex !important;
    }

    /* Article takes full width */
    .art-body p {
        font-size: 15px;
    }

    .art-title {
        font-size: clamp(26px, 3vw, 36px);
    }

    .hero-img-wrap img {
        height: 380px;
    }
}


/* ================================================================
   FIX 3 — SURFACE DUO (540px – 767px)

   Problem (Images 2 & 3):
   a) Author card bio text overflowing vertically (not wrapping)
   b) Sidebar widgets showing in 2 cols beside content (should be after)
   ================================================================ */

@media screen and (min-width: 540px) and (max-width: 767px) {

    /* --- Layout fix: article first, sidebar last --- */
    .content-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px;
    }

    .art-sidebar {
        order: 2 !important;
        position: static !important;
        top: auto !important;
        width: 100% !important;
        /* flex-direction: row !important;
        flex-wrap: wrap !important; */
        gap: 14px;
    }

    .art-sidebar>.sw {
        flex: 1 1 calc(50% - 7px) !important;
        min-width: 220px !important;
        max-width: calc(50% - 7px) !important;
    }

    /* --- Author card overflow fix --- */
    /* The bio text was breaking out — force wrap */
    .a-bio,
    .author-bio,
    .author-desc,
    .author-col p,
    .a-role,
    .a-name {
        overflow-wrap: break-word !important;
        word-break: break-word !important;
        white-space: normal !important;
        overflow: visible !important;
        max-width: 100% !important;
    }

    /* Author section layout fix */
    .author-col {
        width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        padding-bottom: 16px !important;
        border-right: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, .15);
    }

    .form-col {
        width: 100% !important;
        padding-left: 0 !important;
    }

    .section-top {
        flex-direction: column !important;
        padding: 20px 16px !important;
        gap: 16px;
    }

    .section-bottom {
        flex-direction: column !important;
        padding: 18px 16px !important;
    }

    .social-col {
        width: 100% !important;
        border-right: none !important;
        padding-right: 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, .15);
        padding-bottom: 16px;
        margin-bottom: 16px;
    }

    .reviews-col {
        width: 100% !important;
        padding-left: 0 !important;
    }

    /* Fix the vertical text overflow in author card (Image 2) */
    /* The issue was likely a fixed height or overflow:hidden on the card */
    .main-card {
        overflow: visible !important;
        height: auto !important;
        min-height: unset !important;
    }

    .section-wrap {
        overflow: hidden;
        height: auto !important;
    }

    /* Badge / role text that was overflowing vertically */
    .abadge,
    .badges-grid,
    .a-credentials,
    .author-credentials {
        flex-wrap: wrap !important;
        white-space: normal !important;
        overflow: visible !important;
        word-break: break-word !important;
        max-width: 100% !important;
    }
}


/* ================================================================
   FIX 4 — SURFACE DUO + ALL MOBILE: Author card specific fix

   The vertical text overflow (Image 2) where bio text appears
   as a single narrow column of characters — this is caused by
   the text container having a fixed width that's too narrow.
   ================================================================ */

@media screen and (max-width: 767px) {

    /* Force author section text containers to be full width */
    .author-col,
    .author-col>*,
    .a-info,
    .author-info,
    .author-text {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: visible !important;
        white-space: normal !important;
        word-break: break-word !important;
    }

    /* The right column of author that was showing vertically */
    /* Likely .author-col has a fixed width set by desktop styles */
    .author-col .a-bio,
    .author-col .bio-text,
    .author-right,
    .auth-right {
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
        white-space: normal !important;
        flex: 1 1 100% !important;
    }

    /* Fix any flex children that might create narrow columns */
    .section-top>* {
        min-width: 0 !important;
        overflow-wrap: break-word !important;
    }
}


/* ================================================================
   FIX 5 — NEST HUB (1024px × 600px landscape)

   Problem: Nest Hub is a short landscape screen. The 2-column
   layout needs to be maintained but with reduced heights.
   Sidebar should stay visible beside content (it's wide enough).
   ================================================================ */

@media screen and (min-width: 1000px) and (max-width: 1050px) and (max-height: 650px) {

    /* Nest Hub — keep 2-column but compact everything vertically */
    .content-grid {
        display: grid !important;
        grid-template-columns: 1fr 260px !important;
        gap: 20px !important;
    }

    .art-sidebar {
        order: unset !important;
        position: sticky !important;
        top: 8px;
        /* flex-direction: column !important; */
        max-height: calc(100vh - 16px);
        overflow-y: auto;
        overflow-x: hidden;
    }

    .toc-sticky {
        display: block !important;
    }

    .mob-toc-toggle {
        display: none !important;
    }

    /* Compact vertical spacing */
    .hero-img-wrap img {
        height: 180px !important;
    }

    .sc-slider {
        height: 350px !important;
    }

    .art-title {
        font-size: 22px !important;
    }

    .sec-h2 {
        font-size: 16px !important;
    }

    .art-body p {
        font-size: 13px !important;
    }

    .sec-div {
        margin: 8px 0 !important;
    }

    .coref-card {
        padding: 10px 12px !important;
        margin-bottom: 8px !important;
    }

    .faq-item {
        margin-bottom: 5px !important;
    }

    .faq-q {
        padding: 10px 12px !important;
        font-size: 13px !important;
    }

    .cards-2x2 {
        gap: 8px !important;
    }

    /* Sidebar widgets compact */
    .sw-deals-body {
        padding: 8px 12px 12px !important;
    }

    .sw-deals-off-pct {
        font-size: 22px !important;
    }

    .sw-quiz-inner {
        padding: 14px 14px !important;
    }

    .sw-quiz-headline {
        font-size: 14px !important;
    }

    .sw-chat-inner {
        padding: 14px 14px 16px !important;
    }

    .sw-chat-title {
        font-size: 14px !important;
    }

    .sw {
        margin-bottom: 10px !important;
    }
}


/* ================================================================
   FIX 6 — ALL TABLETS (768px – 1199px): Sidebar ORDER fix

   Ensure sidebar always renders visually AFTER article body
   regardless of HTML source order.
   ================================================================ */

@media screen and (min-width: 768px) and (max-width: 1199px) {
    /* If content-grid is a CSS grid, the order property doesn't
       work the same way. We need to ensure flex column ordering. */

    .content-grid {
        display: flex !important;
        flex-direction: column !important;
    }

    /* If the HTML has sidebar BEFORE article body, push it down */
    .art-sidebar {
        order: 99 !important;
        /* Always last */
    }

    /* Article content always first */
    .art-body-wrap,
    .art-main,
    .article-body,
    .art-content,
    .main-article {
        order: 1 !important;
    }
}


/* ================================================================
   FIX 7 — SURFACE DUO SPECIFIC: Fix sidebar 2-col layout
   so both columns are properly sized side by side (not too wide)
   ================================================================ */

@media screen and (min-width: 540px) and (max-width: 767px) {
    /* .art-sidebar {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
    } */

    /* Most widgets: half width */
    .art-sidebar>.sw {
        flex: 1 1 calc(50% - 7px) !important;
        max-width: calc(50% - 7px) !important;
    }

    /* Ad placeholder widgets: full width to avoid tiny ads */
    .art-sidebar>[class*="sw-ad"] {
        flex: 1 1 100% !important;
        max-width: 100% !important;
    }
}


/* ================================================================
   FIX 8 — IPAD PRO: Fix sidebar widget grid (2-per-row)
   ================================================================ */

@media screen and (min-width: 1024px) and (max-width: 1199px) {
    .art-sidebar {
        /* display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important; */
        gap: 16px;
    }

    .art-sidebar>.sw {
        flex: 1 1 calc(50% - 8px) !important;
        max-width: calc(50% - 8px) !important;
    }

    /* Make ad widgets full width */
    .art-sidebar>[class*="sw-ad"] {
        flex: 1 1 100% !important;
        max-width: 100% !important;
    }
}


/* ================================================================
   FIX 9 — GLOBAL: Ensure content-grid children don't use
   min-content sizing that causes overflow
   ================================================================ */

.content-grid>* {
    min-width: 0 !important;
    max-width: 100% !important;
}


/* ═══════════════════════════════════════════════════
   TWO-FIXES.CSS
   Load LAST — after all other CSS files

   FIX 1: Nest Hub (1024×600) — sidebar after article
   FIX 2: Surface Duo (540–767px) — blob clipped in card
   ═══════════════════════════════════════════════════ */


/* ───────────────────────────────────────────────────
   FIX 1 — NEST HUB (900px–1199px, max-height 640px)

   Section 7 in articles-responsive.css sets
   grid-template-columns: 1fr 260px !important
   which forces sidebar beside article on Nest Hub.
   Override: single column, sidebar below article.
   ─────────────────────────────────────────────────── */

@media screen and (min-width: 900px) and (max-width: 1199px) and (max-height: 640px) {

    .content-grid {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: unset !important;
        gap: 20px !important;
    }

    article.art-body {
        order: 1 !important;
        width: 100% !important;
    }

    .art-sidebar {
        order: 2 !important;
        position: static !important;
        top: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: none !important;
        overflow-y: visible !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 16px !important;
    }

    .art-sidebar>.sw {
        flex: 1 1 calc(50% - 8px) !important;
        max-width: calc(50% - 8px) !important;
        min-width: 0 !important;
    }

    .toc-sticky {
        display: none !important;
    }

    .mob-toc-toggle {
        display: flex !important;
    }
}


/* ───────────────────────────────────────────────────
   FIX 2 — SURFACE DUO (540px–767px)
   Blob/oval decoration overflows .main-card boundary.

   The .section-top has a decorative background shape
   (pseudo-element or absolutely positioned child).
   Clipping .main-card hard-stops it at card edge.
   ─────────────────────────────────────────────────── */

@media screen and (min-width: 540px) and (max-width: 767px) {

    .main-card {
        overflow: hidden !important;
        border-radius: 16px !important;
        position: relative !important;
    }

    .avatar-outer::before {
        display: none !important;
    }

    .verified-badge {
        position: absolute;
        bottom: 20px;
        left: 80px;
        width: 24px;
        height: 24px;
        background: var(--grad);
        border-radius: 50%;
        border: 2.5px solid #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 3;
        animation: popIn .5s cubic-bezier(.34, 1.56, .64, 1) both;
        animation-delay: .4s;
    }

    .section-top {
        overflow: hidden !important;
        position: relative !important;
    }
}