/* =========================================
   Amaryllis — AIRCARE PAGE
   -----------------------------------------
   Loaded only on the Aircare template. style.css stays the base:
   tokens, reset, header/footer and the .reveal / .stagger motion
   system come from there.

   Figma: the article column and the ventilation diagram both run to
   1282; the blog row sits slightly wider at ~1370. Those two figures
   are the only widths on the page.
========================================= */

/* ---------------------------------------------------------------
 * Every value below now comes from the Figma file via the API, not
 * from a screenshot. The design frame is 1440 wide, so each type size
 * is expressed as clamp(mobile, Nvw, figma) where the vw term is
 * calibrated to land exactly on the Figma figure at a 1440 viewport:
 * a 40px heading is 40/1440 = 2.78vw. Below 1440 it scales down
 * smoothly; at 1440 and above it holds at the designed size.
 * --------------------------------------------------------------- */
.aircare-page {
    /* --- Widths as ratios, not caps ----------------------------
     * Figma: the article column is 1282 at x=79 and the blog row 1408
     * (16 either side) on a 1440 frame. Held as INSETS rather than
     * max-widths: a fixed cap does not bind at 1440 but does above it,
     * which is what stranded hundreds of pixels of white down each
     * side on a large display.
     *     79/1440 = 5.49vw      16/1440 = 1.11vw
     * ----------------------------------------------------------- */
    /* --- Reading measure -----------------------------------------
     * Figma's article column is 1282 at a 1440 frame, which the
     * 5.49vw inset already produces exactly — so this cap does NOT
     * bind at the design width and Figma is reproduced precisely.
     *
     * It only engages on a large display, and the value is a
     * readability trade-off rather than a design figure:
     *
     *   cap    line length at 24px    margin each side at 2560
     *   1282   ~68 characters         639px
     *   1600   ~85 characters         480px
     *   none   ~120 characters        141px
     *
     * 1600 keeps the copy inside a workable measure while cutting the
     * white space that the tighter cap was stranding.
     * ----------------------------------------------------------- */
    --article-max: 1600px;
    --blogs-max: none;
    --article-inset: max(18px, 5.49vw);
    --blogs-inset: max(12px, 1.11vw);

    --air-ink: #1f1f1f;    /* was #111111 */
    --air-body: #1f1f1f;   /* was #333333 — body copy is the same ink */
    --air-muted: #8a8a8a;  /* was #8e8e8e — the inactive tab */

    /* The line art blue. Was #1f6fd0, which was close but invented;
       the file says #0449b7, and it is also the colour of BOTH
       practice labels. */
    --air-blue: #0449b7;

    --blog-radius: 24px;   /* was 8 */
}

/* =========================================
   1. LINE-ART BANNER
   -----------------------------------------
   An illustration, not a photograph — so it is never cropped and
   never given a fixed height. width:100% + height:auto lets it keep
   whatever ratio the exported file has, which also means you can
   re-export it at a different size without touching the CSS.
========================================= */
/* Figma: the illustration is full-bleed 1440 wide, starting at y=134
   with the nav ending at y=100 — so it does NOT sit flush under the
   header; there is a 34px band of page above it. */
/* Figma floats this illustration 34px below the nav and lets it keep
   its own 1440 x 628 shape. It now matches every other page instead:
   flush under the header and the full height of the window, with the
   artwork covering the box. */
.aircare-banner {
    width: 100%;
    height: var(--hero-h);
    background: var(--c-page);
    overflow: hidden;
}

.aircare-banner img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}

/* =========================================
   2. INTRO
========================================= */
/* --- Vertical rhythm --------------------------------------------
 * Derived from the Y coordinates of both Aircare frames, which agree
 * with each other exactly: nav 0-100, banner at 134, intro group at
 * 802, tabs at 1003, article at 1071. The gaps that fall out are
 * 34 / 40 / 48 / 32 — a 48px section rhythm with tighter joins inside
 * a group. Same clamp calibration as the type: the vw term lands on
 * the Figma figure at a 1440 viewport.
 * ------------------------------------------------------------- */
.aircare-intro {
    padding: clamp(24px, 2.78vw, 40px) var(--article-inset) 0;
    background: var(--c-page);
    text-align: center;
}

/* Figma: Source Sans Pro w600 40 / #1f1f1f, in a 944 x 44 box.
   The file reports a 24px line-height, which is less than the type
   size and would clip — that is Figma's "auto" leaking through, so
   the 44px box height is used instead (1.1). */
/* h2 as well as h1: the two tab views print the same heading, and only
   the first is an h1 so the page has exactly one. See page-aircare.php. */
.aircare-intro h1,
.aircare-intro h2 {
    font-family: var(--font-display);
    font-size: clamp(26px, 2.78vw, 38px);
    font-weight: 600;
    line-height: 1.1;
    color: var(--air-ink);
    /* H1 box is 44 tall at y=802; the lead starts 20px below it. */
    margin-bottom: clamp(14px, 1.39vw, 20px);
}

/* Figma: Source Sans Pro w400 20 / lh 24 / #1f1f1f, box 929 wide. */
.aircare-lead {
    max-width: 929px;
    margin: 0 auto;
    font-family: var(--font-display);
    /* Ceiling dropped 20 -> 18: Figma's 20 reads oversized on a desktop
       screen. Only the CEILING moves, so the 15px floor and the 1.39vw
       slope are untouched and phone/tablet render exactly as before. */
    font-size: clamp(15px, 1.39vw, 16px);
    font-weight: 400;
    line-height: 1.4;
    color: var(--air-body);
}

/* =========================================
   3. TABS
   -----------------------------------------
   Two views of the same page, swapped in place — no navigation.
   Both panels are in the document; JS shows one at a time.

   The buttons are real <button>s in a role="tablist", which is what
   gives keyboard users arrow-key movement between them for free.
========================================= */
.aircare-tabs {
    display: flex;
    justify-content: center;
    align-items: center;
    /* Figma: the two tab components are 486 wide, sitting at x=210 and
       x=744 — so the gap between them is 48px, not the 170 this was
       allowed to reach. */
    gap: clamp(24px, 3.33vw, 48px);
    flex-wrap: wrap;
    /* Intro group ends at 955, tabs begin at 1003 → 48px. */
    padding: clamp(28px, 3.33vw, 48px) var(--article-inset) 0;
    background: var(--c-page);
}

.aircare-tab {
    position: relative;
    display: inline-block;
    padding: 0 0 8px;
    background: none;
    border: none;
    cursor: pointer;
    /* Figma: Source Sans Pro w600 32 / lh 48. Inactive #8a8a8a,
       selected #1f1f1f — the rule below swaps it. */
    font-family: var(--font-display);
    font-size: clamp(19px, 2.22vw, 30px);
    font-weight: 600;
    line-height: 1.5;
    color: var(--air-muted);
    text-align: center;
    transition: color 0.35s var(--ease-out);
}

.aircare-tab:hover {
    color: var(--air-ink);
}

/* Selected view. aria-selected on the markup is what drives this, so
   the styling and the accessible state cannot drift apart — there is
   no separate "active" class to forget to update. */
.aircare-tab[aria-selected="true"] {
    color: var(--air-ink);
}

/* Underline wipes in on hover, and is held open for the selected
   tab — same gesture as the header nav. */
.aircare-tab::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform 0.4s var(--ease);
}

.aircare-tab:hover::after,
.aircare-tab:focus-visible::after,
.aircare-tab[aria-selected="true"]::after {
    transform: scaleX(1);
    transform-origin: left center;
}

/* --- Swappable regions -------------------------------------------
 * Any element carrying data-panel belongs to a tab — the banner, the
 * page title, the lead paragraph and the article body all do, because
 * all four change between the two views. The tab script toggles
 * .is-active on every matching element, so adding another swappable
 * region later needs no JS change, just the attribute.
 *
 * Gated behind .has-js, exactly like the reveal system: if the script
 * fails or is blocked, BOTH views stay on the page and everything is
 * still readable. Nothing is ever hidden with no way to get it back.
 *
 * Hiding via CSS on .is-active rather than the [hidden] attribute set
 * by JS avoids a flash of the second view before the script runs —
 * the correct one is already the only visible one at first paint.
 * ------------------------------------------------------------- */
.has-js [data-panel]:not(.is-active) {
    display: none;
}

/* Content fades up as it swaps in, so the change registers as a
   transition rather than a jump-cut. The banner is excluded — a
   full-width image sliding on every tab press is too much movement. */
@media (prefers-reduced-motion: no-preference) {
    .has-js .aircare-panel.is-active,
    .has-js .aircare-intro.is-active {
        animation: aircare-panel-in 0.45s var(--ease-out) both;
    }
}

@keyframes aircare-panel-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

/* =========================================
   4. Q&A ARTICLE
========================================= */
/* Tabs end at 1039, the article begins at 1071 → 32px. */
.aircare-article {
    padding: clamp(20px, 2.22vw, 32px) var(--article-inset) clamp(28px, 3.33vw, 48px);
    background: var(--c-page);
    overflow-x: clip;
}

.aircare-list {
    max-width: var(--article-max);
    margin: 0 auto;
}

/* 48px between entries — e.g. the practice images end at 3691 and the
   next entry begins at 3739. */
.aircare-item {
    margin-bottom: clamp(28px, 3.33vw, 48px);
}

.aircare-item:last-child {
    margin-bottom: 0;
}

/* --- Entry heading ----------------------------------------------
 * OPEN SANS, not the display font — and that is not a mistake.
 * Figma has these numbered headings as Open Sans w700 24 / lh 48 /
 * #000000, sitting in a 1280 box. The page H1 and the tab labels
 * above are Source Sans Pro; the article content is Open Sans. The
 * file is the source of truth, so the split is reproduced as-is
 * rather than normalised to "headings use the heading font".
 *
 * The article ink is #000000 here, where the rest of the page is
 * #1f1f1f. Also straight from the file.
 * ------------------------------------------------------------- */
.aircare-item h2 {
    font-family: var(--font-body);
    font-size: clamp(16px, 1.67vw, 22px);
    font-weight: 700;
    line-height: 2;
    color: #000000;
    /* Zero, deliberately. In Figma the numbered heading and the
       paragraph under it are a SINGLE text node — the only thing
       separating them is the 48px line-height, which line-height:2
       on 24px type already reproduces. Any margin here would push
       the block past the design. */
    margin-bottom: 0;
}

/* Figma: Open Sans w400 24 / lh 48 / #000000. */
/* Ceiling 24 -> 22. Floor and slope unchanged, so this only affects
   desktop and above. NOTE: the numbered heading above each paragraph
   (.aircare-item h2) is still 24 — in Figma the two are a SINGLE text
   node, so they were the same size. Say the word if you want that down
   to 22 as well and they should match again. */
.aircare-item p {
    font-family: var(--font-body);
    font-size: clamp(16px, 1.67vw, 20px);
    font-weight: 400;
    line-height: 2;
    color: #000000;
}

/* --- Diagram --------------------------------------------------
 * The summer / winter drawing, including its centre divider, is one
 * exported file (1282 x 581 in Figma). The frame around it is CSS
 * rather than baked into the PNG, so the corner radius and the blue
 * can be adjusted without a re-export.
 * ------------------------------------------------------------- */
/* No frame. Figma has these diagrams at corner radius 0 with no
   stroke — the blue border, its 4px padding and the 4px radius were
   all added in CSS and are now removed. */
.aircare-figure {
    /* Text block ends at 1599, the diagram starts at 1647 → 48px.
       This was 16px. */
    margin-top: clamp(28px, 3.33vw, 48px);
    overflow: hidden;
}

.aircare-figure img {
    width: 100%;
    height: auto;
    display: block;
}

/* Optional caption under a figure. */
.aircare-figure figcaption {
    padding: 10px 14px 12px;
    font-size: clamp(11px, 1vw, 11px);
    line-height: 1.55;
    color: var(--air-body);
}

/* --- Lead-in above a numbered list ------------------------------
 * The Tips view opens with a question and a one-line answer before
 * the numbered steps begin. Not an entry itself, so it sits outside
 * the list and carries no number.
 * ------------------------------------------------------------- */
/* No bottom margin — same reasoning as the entry heading: in Figma
   the preamble and the first entry are one continuous text block. */
.aircare-preamble {
    max-width: var(--article-max);
    margin: 0 auto;
}

/* Same treatment as the entries above — Open Sans, 24/48, #000000. */
.aircare-preamble h2 {
    font-family: var(--font-body);
    font-size: clamp(16px, 1.67vw, 22px);
    font-weight: 700;
    line-height: 2;
    color: #000000;
    margin-bottom: 0;
}

/* Matches .aircare-item p above — 24 -> 22 on desktop only. */
.aircare-preamble p {
    font-family: var(--font-body);
    font-size: clamp(16px, 1.67vw, 20px);
    font-weight: 400;
    line-height: 2;
    color: #000000;
}

/* --- Paired figures: good practice vs poor practice -------------
 * Two drawings side by side, each with its own heading and note
 * ABOVE the image rather than below — the reader needs to know which
 * case they are looking at before they read the drawing.
 *
 * Unframed, unlike the single diagrams: two blue boxes sitting next
 * to each other would fight with the line art inside them.
 * ------------------------------------------------------------- */
/* Entry text ends at 3011, the practice headings begin at 3050 → 39px.
   The two figures are 632 wide inside a 1282 column, leaving an 18px
   gutter between them. */
.aircare-figure-pair {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    margin-top: clamp(22px, 2.71vw, 39px);
}

.practice-item {
    margin: 0;
}

/* Headings end at 3142, the drawings start at 3165 → 23px. */
.practice-head {
    margin-bottom: clamp(14px, 1.6vw, 23px);
}

/* Figma: Source Sans Pro w700 24 / lh 24 / #0449b7. */
.practice-title {
    font-family: var(--font-display);
    font-size: clamp(16px, 1.67vw, 22px);
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: 5px;
}

/* BOTH labels are the same blue in the design. The previous green on
   "Good Practice" was invented in CSS — there is no green anywhere in
   this frame. The pair is distinguished by its wording and by the
   drawings, not by colour. */
.practice-title--good,
.practice-title--poor {
    color: var(--air-blue);
}

/* Figma: Source Sans Pro w400 16, box 632 wide. The file's 16px
   line-height equals the type size, which would set solid — 1.4 is
   used so a three-line note stays readable. */
.practice-note {
    font-family: var(--font-display);
    font-size: clamp(12px, 1.11vw, 14px);
    font-weight: 400;
    line-height: 1.4;
    color: var(--air-body);
}

/* Figma: 632 x 526 with a 20px corner radius. */
.practice-item img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 20px;
}

/* Bulleted or numbered runs inside an entry. The theme resets
   list-style globally, so it has to be switched back on here. */
.aircare-item ul,
.aircare-item ol {
    margin: 12px 0 0 22px;
    list-style: disc;
}

.aircare-item ol {
    list-style: decimal;
}

.aircare-item li {
    font-size: clamp(13px, 1.15vw, 14px);
    line-height: 1.72;
    color: var(--air-body);
    margin-bottom: 8px;
}

.aircare-item li:last-child {
    margin-bottom: 0;
}

.aircare-item p + p {
    margin-top: 12px;
}

/* =========================================
   5. POPULAR BLOGS
========================================= */
/* Previous section ends at 3897, this begins at 3945 → 48px above.
   The blog row ends at 4593 and the footer starts at 4641 → 48px below. */
.aircare-blogs {
    padding: clamp(28px, 3.33vw, 48px) var(--blogs-inset);
    background: var(--c-page);
    overflow-x: clip;
}

/* Figma: Source Sans Pro w600 32 / lh 48 / #1f1f1f. */
.aircare-blogs-title {
    text-align: center;
    font-family: var(--font-display);
    font-size: clamp(20px, 2.22vw, 30px);
    font-weight: 600;
    line-height: 1.5;
    color: var(--air-ink);
    /* Title ends at 2818, the card row begins at 2866 → 48px. */
    margin-bottom: clamp(28px, 3.33vw, 48px);
}

/* Figma: the Blogs row is 1408 wide with a 16px gap between cards. */
/* Every published post in ONE row that scrolls sideways (client request),
   three in view on desktop. Each card is exactly as wide as the old
   three-column grid made it - (row - 2 gaps) / 3 - so the cards look as
   they did; the ones past the third are reached by swiping, scrolling or
   the arrow buttons (js/blog-scroller.js). */
.blog-scroll {
    position: relative;
    max-width: var(--blogs-max);
    margin: 0 auto;
    --per-view: 3;
    --blog-gap: 16px;
}

.blog-grid {
    display: flex;
    gap: var(--blog-gap);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    /* Room inside the scroller for the card shadow and the hover lift,
       which a scrolling box would clip. The negative margins give the
       room back, so the row's content width - and each card's - is
       unchanged. */
    padding: 8px 14px 30px;
    margin: -8px -14px -30px;
    scroll-padding-inline: 14px;
}

.blog-grid::-webkit-scrollbar {
    display: none;
}

.blog-grid > .blog-card {
    flex: 0 0 calc((100% - (var(--per-view) - 1) * var(--blog-gap)) / var(--per-view));
    scroll-snap-align: start;
}

/* Figma: 464 x 512, radius 24, fill #fdfdfd (the "primary white"). */
.blog-card {
    display: flex;
    flex-direction: column;
    background: var(--c-page);
    border-radius: var(--blog-radius);
    overflow: hidden;
    box-shadow: var(--card-shadow);
    transition: box-shadow 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}

.blog-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--card-shadow);
}

/* display:block because this is an <a> now, not a <div> — aspect-ratio
   and overflow are both ignored on an inline box, which would collapse
   the media area to nothing when a post has no featured image.

   Figma: the image is 464 x 329 with its own 24px radius, inside a
   464 x 512 card. The old 3/2 was an approximation that cropped ~20px
   off every thumbnail. */
.blog-media {
    display: block;
    aspect-ratio: 464 / 329;
    overflow: hidden;
    border-radius: var(--blog-radius);
    background: #f0eeec;
}

.blog-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s var(--ease-out);
}

.blog-card:hover .blog-media img {
    transform: scale(1.04);
}

.blog-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 20px 22px 22px;
}

/* Figma: Open Sans w700 24 / lh 40 / #1f1f1f — the body font again,
   same as the article headings. */
.blog-body h3 {
    font-family: var(--font-body);
    font-size: clamp(18px, 1.67vw, 22px);
    font-weight: 700;
    line-height: 1.67;
    /* Capitals, as the Figma Popular Blogs row sets them (and as the same
       cards at the foot of a post already do). */
    text-transform: uppercase;
    color: var(--air-ink);
    margin-bottom: 10px;
}

/* Figma: Open Sans w600 16 / lh 24 / #1f1f1f. */
.blog-excerpt {
    font-family: var(--font-body);
    font-size: clamp(13px, 1.11vw, 14px);
    font-weight: 400;
    line-height: 1.5;
    color: var(--air-body);
    /* Two lines, so the date lines up across all three cards even
       when one blurb runs longer. margin-bottom:auto then pins the
       date to the bottom of the tallest card in the row. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: auto;
}

.blog-date {
    margin-top: 16px;
    font-size: clamp(12px, 1.05vw, 12px);
    color: var(--air-body);
}

/* Cards arrive left to right, each from its own side */
.has-js .blog-grid.stagger > *:nth-child(1) { --reveal-delay: 0ms;   --reveal-x: -26px; }
.has-js .blog-grid.stagger > *:nth-child(2) { --reveal-delay: 80ms;  --reveal-x: 0px; }
.has-js .blog-grid.stagger > *:nth-child(3) { --reveal-delay: 160ms; --reveal-x: 26px; }

/* Q&A entries rise straight up, one after another */
.has-js .aircare-list.stagger > *:nth-child(n) { --reveal-x: 0px; }
.has-js .aircare-list.stagger > *:nth-child(1) { --reveal-delay: 0ms; }
.has-js .aircare-list.stagger > *:nth-child(2) { --reveal-delay: 70ms; }
.has-js .aircare-list.stagger > *:nth-child(3) { --reveal-delay: 140ms; }
.has-js .aircare-list.stagger > *:nth-child(4) { --reveal-delay: 210ms; }
.has-js .aircare-list.stagger > *:nth-child(5) { --reveal-delay: 280ms; }

/* =========================================
   6. RESPONSIVE
========================================= */
@media (max-width: 992px) {
    .blog-scroll {
        --per-view: 2;
        --blog-gap: 18px;
    }

    .has-js .blog-grid.stagger > *:nth-child(1),
    .has-js .blog-grid.stagger > *:nth-child(2),
    .has-js .blog-grid.stagger > *:nth-child(3) {
        --reveal-delay: 0ms;
        --reveal-x: 0px;
    }

    .has-js .blog-grid.stagger > *:nth-child(2n + 1) { --reveal-x: -20px; }
    .has-js .blog-grid.stagger > *:nth-child(2n + 2) { --reveal-delay: 90ms; --reveal-x: 20px; }
}

@media (max-width: 576px) {
    /* --- Both tabs on ONE row -------------------------------------
     * Client request. "Basic Knowledge of Ventilation" and
     * "Ventilation Tips" are long labels, and at the inherited size
     * they wrapped the flex row onto two lines, which read as two
     * separate headings rather than a choice between two views.
     *
     * nowrap keeps them side by side, and each tab becomes an equal
     * half of the row with its own label wrapping inside it. The type
     * comes down to suit the narrower column.
     * ----------------------------------------------------------- */
    /* --- The opening headline stays on ONE line -------------------
     * Client request. At the inherited 26px "Better Air Begins with
     * Better Ventilation" is 443px wide against a 334px column, so it
     * broke after "Better" and the last word sat alone on line two.
     *
     * Measured rather than guessed: it needs 19.6px to fit at 375.
     * Expressed as 5vw it scales with the column and keeps a few
     * percent in hand at every width down to 320 (16.0px against the
     * 16.4px it needs there), and the 26px cap stops it growing past
     * its normal size as the breakpoint is approached.
     *
     * h1 only. The Tips view's h2 is a longer sentence again
     * ("Building Healthier Spaces Through Smarter Ventilation") and
     * would need 14px to fit, which is too small for a page heading -
     * that one is left to wrap as it always has.
     * ----------------------------------------------------------- */
    .aircare-intro h1 {
        font-size: min(5vw, 26px);
        white-space: nowrap;
    }

    .aircare-tabs {
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 14px;
    }

    .aircare-tab {
        flex: 1 1 0;
        min-width: 0;
        padding-bottom: 6px;
        font-size: 15px;
        line-height: 1.3;
    }

    /* --- Diagram on a phone: fit, do not slide --------------------
     * Client request. It used to be a horizontally scrollable strip
     * held to a 620px minimum, so you swiped across the drawing
     * instead of seeing it whole - and on a page that already scrolls
     * vertically, a sideways-scrolling figure is easy to miss
     * entirely.
     *
     * It now simply fits the column. The labels inside the artwork are
     * small at this width, which is the trade the scroll was avoiding,
     * but the drawing reads as one picture and nothing is hidden.
     * ----------------------------------------------------------- */
    .aircare-figure {
        overflow-x: hidden;
    }

    .aircare-figure img {
        min-width: 0;
        width: 100%;
    }

    /* The paired drawings stack — side by side at this width each is
       under 160px and the airflow arrows are indistinguishable. */
    .aircare-figure-pair {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .blog-scroll {
        --per-view: 1;
        --blog-gap: 16px;
    }

    .blog-body {
        padding: 16px 18px 18px;
    }

    .aircare-item {
        margin-bottom: 24px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .blog-card,
    .blog-media img,
    .aircare-tab,
    .aircare-tab::after {
        transition: none;
    }

    .blog-card:hover { transform: none; }
    .blog-card:hover .blog-media img { transform: none; }

    .blog-grid { scroll-behavior: auto; }
}