/* gadgetChecks Article Header System – v0.7.6 targeted fixes.
   Frozen series master remains untouched.
   1) Dynamic detail-button arrow foreground stays synchronized.
   2) Tablet Portrait reading-time fit is tightened further.
   3) Reviews/GadgetCheck only: smaller mobile headline and contained score labels. */

body.gcahs-test-header-active.single-post [data-gcahs-accent-synced="1"] .gcahs-detail-button-synced,
body.gcahs-test-header-active.single-post [data-gcahs-accent-synced="1"] .gcahs-detail-button-synced *,
body.gcahs-test-header-active.single-post [data-gcahs-accent-synced="1"] .gcahs-detail-button-synced::before,
body.gcahs-test-header-active.single-post [data-gcahs-accent-synced="1"] .gcahs-detail-button-synced::after,
body.gcahs-test-header-active.single-post [data-gcahs-accent-synced="1"] .gcahs-detail-button-synced *::before,
body.gcahs-test-header-active.single-post [data-gcahs-accent-synced="1"] .gcahs-detail-button-synced *::after {
    color: var(--gcahs-test-category-accent) !important;
}

/* Tablet Portrait: keep the approved 4-cell rail. Only make the reading
   cell's contents light enough to fit even on the narrower iPad viewport. */
@media (orientation: portrait) and (min-width: 700px) and (max-width: 1180px) {
    body.gcahs-series-header-active.single-post .gcahs-meta__item--reading {
        padding-left: 2px !important;
        padding-right: 2px !important;
        overflow: visible !important;
    }

    body.gcahs-series-header-active.single-post .gcahs-meta__item--reading .gcahs-meta__inner {
        gap: 3px !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    body.gcahs-series-header-active.single-post .gcahs-meta__item--reading .gcahs-meta__icon,
    body.gcahs-series-header-active.single-post .gcahs-meta__item--reading .gcahs-meta__icon svg {
        width: 14px !important;
        height: 14px !important;
        min-width: 14px !important;
        min-height: 14px !important;
    }

    body.gcahs-series-header-active.single-post .gcahs-meta__item--reading .gcahs-meta__icon {
        flex: 0 0 14px !important;
        flex-basis: 14px !important;
    }

    body.gcahs-series-header-active.single-post .gcahs-meta__item--reading .gcahs-meta__text {
        display: block !important;
        min-width: 0 !important;
        font-size: 10.3px !important;
        line-height: 1.1 !important;
        letter-spacing: -.015em !important;
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }
}

@media (orientation: portrait) and (min-width: 700px) and (max-width: 840px) {
    body.gcahs-series-header-active.single-post .gcahs-meta__item--reading .gcahs-meta__text {
        font-size: 9.9px !important;
    }
}

/* Reviews and GadgetCheck can have much longer headlines than series posts.
   Only these two test formats receive a slightly smaller mobile title. */
@media (orientation: portrait) and (max-width: 699px) {
    body.gcahs-test-header-active.single-post .gcahs-header--test .gcahs-title {
        font-size: clamp(17px, 4.35vw, 19px) !important;
        line-height: 1.085 !important;
        letter-spacing: -.012em !important;
    }

    /* Keep GESAMTSCORE + format caption physically inside the top-right card.
       Explicit grid rows prevent theme typography from pushing either label
       above/below the score surface. */
    body.gcahs-test-header-active.single-post .gcahs-header--test .gcahs-test-score {
        width: 92px !important;
        max-width: 29% !important;
        height: 86px !important;
    }

    body.gcahs-test-header-active.single-post .gcahs-test-score__card,
    body.gcahs-test-header-active.single-post.gcahs-theme-gadgetcheck .gcahs-test-score__card {
        width: 88px !important;
        height: 82px !important;
        min-height: 82px !important;
        max-height: 82px !important;
        padding: 8px 5px 7px !important;
        display: grid !important;
        grid-template-rows: 9px 1fr 9px !important;
        align-items: center !important;
        justify-items: center !important;
        row-gap: 1px !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    body.gcahs-test-header-active.single-post .gcahs-test-score__label {
        position: static !important;
        align-self: center !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 5.4px !important;
        line-height: 1 !important;
        letter-spacing: .09em !important;
        white-space: nowrap !important;
    }

    body.gcahs-test-header-active.single-post .gcahs-test-score__value {
        position: static !important;
        align-self: center !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 29px !important;
        line-height: .92 !important;
    }

    body.gcahs-test-header-active.single-post .gcahs-test-score__caption {
        position: static !important;
        align-self: center !important;
        max-width: 80px !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 4.9px !important;
        line-height: 1 !important;
        letter-spacing: .055em !important;
        white-space: nowrap !important;
    }
}

@media (orientation: portrait) and (max-width: 380px) {
    body.gcahs-test-header-active.single-post .gcahs-header--test .gcahs-title {
        font-size: 16.6px !important;
        line-height: 1.08 !important;
    }

    body.gcahs-test-header-active.single-post .gcahs-header--test .gcahs-test-score {
        width: 84px !important;
        height: 80px !important;
    }

    body.gcahs-test-header-active.single-post .gcahs-test-score__card,
    body.gcahs-test-header-active.single-post.gcahs-theme-gadgetcheck .gcahs-test-score__card {
        width: 80px !important;
        height: 76px !important;
        min-height: 76px !important;
        max-height: 76px !important;
        grid-template-rows: 8px 1fr 8px !important;
    }

    body.gcahs-test-header-active.single-post .gcahs-test-score__value {
        font-size: 26px !important;
    }

    body.gcahs-test-header-active.single-post .gcahs-test-score__label {
        font-size: 5px !important;
    }

    body.gcahs-test-header-active.single-post .gcahs-test-score__caption {
        max-width: 72px !important;
        font-size: 4.5px !important;
    }
}

/* ========================================================================
   v0.7.7 – MOBILE SCORE CAPTION + TABLET PORTRAIT META WIDTH FIX
   ------------------------------------------------------------------------
   Keeps the v0.7.6 color/FOUC fixes intact.
   1) Reviews/GadgetCheck: force the test-type caption visibly inside the
      mobile score card using anchored positioning.
   2) Portrait tablets: reserve a little more horizontal room for reading
      time, including iPads that expose a desktop-class CSS viewport.
   ======================================================================== */

@media (orientation: portrait) and (max-width: 699px) {
    body.gcahs-test-header-active.single-post .gcahs-test-score__card,
    body.gcahs-test-header-active.single-post.gcahs-theme-gadgetcheck .gcahs-test-score__card {
        position: relative !important;
        display: block !important;
        overflow: hidden !important;
    }

    body.gcahs-test-header-active.single-post .gcahs-test-score__label {
        position: absolute !important;
        z-index: 4 !important;
        top: 9px !important;
        right: 4px !important;
        left: 4px !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        margin: 0 !important;
        text-align: center !important;
        white-space: nowrap !important;
    }

    body.gcahs-test-header-active.single-post .gcahs-test-score__value {
        position: absolute !important;
        z-index: 3 !important;
        top: 50% !important;
        left: 50% !important;
        display: block !important;
        margin: 0 !important;
        transform: translate(-50%, -50%) !important;
        white-space: nowrap !important;
    }

    body.gcahs-test-header-active.single-post .gcahs-test-score__caption {
        position: absolute !important;
        z-index: 4 !important;
        right: 3px !important;
        bottom: 7px !important;
        left: 3px !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        color: var(--gcahs-accent) !important;
        font-size: 4.7px !important;
        line-height: 1 !important;
        letter-spacing: .045em !important;
        text-align: center !important;
        white-space: nowrap !important;
    }
}

@media (orientation: portrait) and (max-width: 380px) {
    body.gcahs-test-header-active.single-post .gcahs-test-score__label {
        top: 8px !important;
    }

    body.gcahs-test-header-active.single-post .gcahs-test-score__caption {
        bottom: 6px !important;
        font-size: 4.25px !important;
        letter-spacing: .03em !important;
    }
}

/* iPad Portrait can expose a CSS viewport wider than the old 1180px tablet
   breakpoint. Keep the approved single-row rail, but change its cell shares
   from 25/25/25/25 to 24/24/24/28 so reading time has enough room. */
@media (orientation: portrait) and (min-width: 700px) and (max-width: 1366px) {
    body.gcahs-series-header-active.single-post .gcahs-meta__item--author {
        left: 0 !important;
        width: 24% !important;
    }

    body.gcahs-series-header-active.single-post .gcahs-meta__item--date {
        left: 24% !important;
        width: 24% !important;
    }

    body.gcahs-series-header-active.single-post .gcahs-meta__item--category {
        left: 48% !important;
        width: 24% !important;
    }

    body.gcahs-series-header-active.single-post .gcahs-meta__item--reading {
        left: 72% !important;
        width: 28% !important;
        padding-left: 1px !important;
        padding-right: 1px !important;
        overflow: visible !important;
    }

    body.gcahs-series-header-active.single-post .gcahs-meta__item--reading .gcahs-meta__inner {
        gap: 2px !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    body.gcahs-series-header-active.single-post .gcahs-meta__item--reading .gcahs-meta__icon,
    body.gcahs-series-header-active.single-post .gcahs-meta__item--reading .gcahs-meta__icon svg {
        width: 13px !important;
        height: 13px !important;
        min-width: 13px !important;
        min-height: 13px !important;
    }

    body.gcahs-series-header-active.single-post .gcahs-meta__item--reading .gcahs-meta__icon {
        flex: 0 0 13px !important;
        flex-basis: 13px !important;
    }

    body.gcahs-series-header-active.single-post .gcahs-meta__item--reading .gcahs-meta__text {
        display: block !important;
        min-width: 0 !important;
        font-size: 10px !important;
        line-height: 1.08 !important;
        letter-spacing: -.025em !important;
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }
}

/* ========================================================================
   v0.7.8 – IPAD PORTRAIT READING TIME + MOBILE TEST TITLE CLEARANCE
   ------------------------------------------------------------------------
   1) iPad Portrait can expose a desktop-class viewport (>1180px), so the
      parent metadata rail remains in the narrower desktop copy column. Give
      its cells a more practical split and slightly lighter type rather than
      only resizing the reading cell.
   2) Reviews/GadgetCheck: reserve a small vertical safety gap between the
      top-right score card and long mobile headlines.
   ======================================================================== */

/* Desktop-class iPad portrait: keep the existing left-aligned rail footprint,
   but redistribute the available width so the full "NN Min. Lesezeit" label
   cannot be clipped at the right edge. */
@media (orientation: portrait) and (min-width: 1181px) and (max-width: 1366px) {
    body.gcahs-series-header-active.single-post .gcahs-meta__item--author {
        left: 0 !important;
        width: 23% !important;
    }

    body.gcahs-series-header-active.single-post .gcahs-meta__item--date {
        left: 23% !important;
        width: 23% !important;
    }

    body.gcahs-series-header-active.single-post .gcahs-meta__item--category {
        left: 46% !important;
        width: 24% !important;
    }

    body.gcahs-series-header-active.single-post .gcahs-meta__item--reading {
        left: 70% !important;
        width: 30% !important;
        padding-left: 1px !important;
        padding-right: 1px !important;
        overflow: visible !important;
    }

    body.gcahs-series-header-active.single-post .gcahs-meta__inner {
        gap: 4px !important;
    }

    body.gcahs-series-header-active.single-post .gcahs-meta__icon,
    body.gcahs-series-header-active.single-post .gcahs-meta__icon svg {
        width: 14px !important;
        height: 14px !important;
        min-width: 14px !important;
        min-height: 14px !important;
    }

    body.gcahs-series-header-active.single-post .gcahs-meta__icon {
        flex: 0 0 14px !important;
        flex-basis: 14px !important;
    }

    body.gcahs-series-header-active.single-post .gcahs-meta__text {
        font-size: 10.6px !important;
        line-height: 1.1 !important;
        letter-spacing: -.012em !important;
        white-space: nowrap !important;
    }

    body.gcahs-series-header-active.single-post .gcahs-meta__item--reading .gcahs-meta__inner {
        gap: 2px !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    body.gcahs-series-header-active.single-post .gcahs-meta__item--reading .gcahs-meta__text {
        font-size: 10px !important;
        letter-spacing: -.025em !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }
}

/* Reviews and GadgetCheck only: long test headlines must begin clearly below
   the mobile score surface. This does not affect normal series headers. */
@media (orientation: portrait) and (max-width: 699px) {
    body.gcahs-test-header-active.single-post .gcahs-header--test .gcahs-title {
        margin-top: 15px !important;
    }
}

@media (orientation: portrait) and (max-width: 380px) {
    body.gcahs-test-header-active.single-post .gcahs-header--test .gcahs-title {
        margin-top: 13px !important;
    }
}

/* ========================================================================
   v0.7.9 – TABLET PORTRAIT META TYPE REFINEMENT
   ------------------------------------------------------------------------
   Keep the v0.7.8 cell distribution exactly as approved. Restore a little
   visual weight on desktop-class iPad portrait without risking clipping.
   ======================================================================== */
@media (orientation: portrait) and (min-width: 1181px) and (max-width: 1366px) {
    body.gcahs-series-header-active.single-post .gcahs-meta__text {
        font-size: 11.2px !important;
    }

    body.gcahs-series-header-active.single-post .gcahs-meta__item--reading .gcahs-meta__text {
        font-size: 10.6px !important;
    }
}