/*
 * Shohay home page (front-page.php)
 *
 * Shohay blue stays the brand and interaction colour (logo, buttons, links).
 * The secondary palette (coral, blush, butterscotch, smoke, duck egg, emerald sea)
 * gives sections and topics their own quiet identity. Soft palette colours are used
 * for surfaces; their deeper "ink" shades are used for text and icons so contrast
 * stays readable.
 */

.home #main { padding-top: 0; }

.sh-home {
    color: var(--sh-ink);
    font-family: 'Noto Serif Bengali', serif;
    -webkit-font-smoothing: antialiased;
}

.sh-home *, .sh-home *::before, .sh-home *::after { box-sizing: border-box; }
.sh-home a { text-decoration: none; }
.sh-home h1, .sh-home h2, .sh-home h3, .sh-home p { font-family: inherit; }
.sh-home img { display: block; max-width: 100%; }



/* ---------- Shared pieces ---------- */

.sh-section { padding: clamp(56px, 7.5vw, 112px) 0; }

.sh-section__head {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
    margin-bottom: clamp(24px, 3vw, 40px);
}
.sh-section__title {
    margin: 0; color: var(--sh-ink);
    font-size: clamp(1.7rem, 1.25rem + 1.4vw, 2.35rem); font-weight: 600; line-height: 1.35;
}
.sh-section__title--lg { font-size: clamp(1.9rem, 1.35rem + 1.8vw, 2.75rem); line-height: 1.3; }
.sh-section__sub { margin: 8px 0 0; color: var(--sh-muted); font-size: 1.06rem; line-height: 1.7; }

.sh-home .sh-eyebrow {
    display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px;
    color: var(--tone-ink, var(--sh-blue)); font-size: .95rem; font-weight: 600; line-height: 1.5;
}
.sh-center { text-align: center; }

.sh-home .sh-link { color: var(--sh-blue); font-weight: 600; white-space: nowrap; }
.sh-home .sh-link:hover, .sh-home .sh-link:focus { color: var(--sh-blue-deep); text-decoration: underline; text-underline-offset: 5px; }

.sh-home .sh-button {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 13px 26px; border-radius: var(--sh-radius-btn);
    background: var(--sh-blue); color: #fff; font-weight: 600; line-height: 1.4;
    transition: background-color .2s ease, box-shadow .2s ease;
}
.sh-home .sh-button:hover, .sh-home .sh-button:focus { background: var(--sh-blue-deep); color: #fff; box-shadow: 0 8px 20px rgba(21, 101, 192, .22); }

.sh-home :focus-visible { outline: 3px solid var(--sh-blue); outline-offset: 3px; }


/* Link list with hairlines and chevrons */
.sh-linklist { list-style: none; margin: 0 0 28px; padding: 0; border-top: 1px solid var(--sh-line); }
.sh-linklist li { border-bottom: 1px solid var(--sh-line); }
.sh-home .sh-linklist a {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 15px 2px; color: var(--sh-ink); font-size: 1.06rem; line-height: 1.55;
    transition: color .2s ease, padding .3s var(--sh-ease);
}
.sh-linklist svg { flex: none; width: 18px; height: 18px; color: #a3a3aa; transition: transform .3s var(--sh-ease), color .2s ease; }
.sh-home .sh-linklist a:hover { color: var(--sh-blue); padding-left: 8px; }
.sh-linklist a:hover svg { color: var(--sh-blue); transform: translateX(3px); }
.sh-home .sh-linklist--compact a { padding: 12px 2px; font-size: 1rem; }

/* ---------- Hero: search first, with one thing at a time in a glass panel ---------- */

.sh-hero {
    position: relative; overflow: hidden; isolation: isolate;
    padding: clamp(36px, 5vw, 76px) 0 clamp(44px, 5.5vw, 84px);
    background: var(--sh-mist);
}
.sh-hero .sh-container { position: relative; z-index: 1; }
.sh-hero__layout { display: grid; gap: clamp(32px, 5vw, 72px); align-items: center; }
.sh-hero__layout > * { min-width: 0; }
@media (min-width: 992px) { .sh-hero__layout { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); } }

/* A question to start from, not a slogan, so it stays modest */
.sh-home .sh-hero__prompt {
    margin: 0; color: var(--sh-ink);
    font-size: clamp(1.4rem, 1.2rem + .8vw, 1.85rem); font-weight: 600; line-height: 1.45;
}

/* Search box (component in site.css): placed under the question */
.sh-hero .sh-search { max-width: 640px; margin-top: 22px; }

/* The five main topics (chips in site.css) */
.sh-hero__topics { max-width: 640px; margin: 22px 0 0; }

/* Quiet palette background: faint shapes float gently; the coral and emerald glows sit behind
   the glass panel so its frosting picks up colour */
.sh-glow { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.sh-glow__blob {
    position: absolute; display: block; will-change: transform;
    border-radius: 58% 42% 55% 45% / 48% 55% 45% 52%; opacity: .3;
    animation: sh-float 20s ease-in-out infinite alternate;
}
.sh-glow__blob--smoke        { width: 64px; height: 60px; top: 12%; right: 3%; background: var(--sh-smoke); opacity: .4; animation-duration: 23s; }
.sh-glow__blob--duck-egg     { width: 170px; height: 158px; bottom: -84px; left: -54px; background: var(--sh-duck-egg); opacity: .45; animation-duration: 26s; }
.sh-glow__blob--rose         { width: 96px; height: 90px; bottom: 9%; right: -30px; background: var(--sh-rose); opacity: .35; animation-duration: 28s; }
.sh-glow__blob--glow-rose,
.sh-glow__blob--emerald      { border-radius: 50%; opacity: 1; animation: sh-drift 30s ease-in-out infinite alternate; }
.sh-glow__blob--glow-rose    { width: 460px; height: 460px; top: 6%; left: -46px; background: radial-gradient(closest-side, rgba(233, 160, 183, .42), rgba(233, 160, 183, 0)); }
.sh-glow__blob--emerald      { width: 380px; height: 380px; top: 38%; right: 2%; background: radial-gradient(closest-side, rgba(107, 147, 147, .26), rgba(107, 147, 147, 0)); }
@keyframes sh-float { from { transform: translate(0, 0) rotate(0deg); } to { transform: translate(12px, -14px) rotate(8deg); } }
@keyframes sh-drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(60px, 40px) scale(1.12); } }

/* ----- The glass panel: one thing at a time; each slides away to the left as the next slides in ----- */

.sh-rotator {
    --sh-rot-shift: 36px; --sh-rot-blur: 0px;
    position: relative; padding: 12px; border-radius: var(--sh-radius-lg);
    background: rgba(255, 255, 255, .5); border: 1px solid rgba(255, 255, 255, .8);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 24px 60px rgba(60, 50, 40, .12);
    -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%);
}
@media (min-width: 992px) and (hover: hover) { .sh-rotator { --sh-rot-blur: 5px; } }
.sh-home .sh-rotator__heading { margin: 2px 6px 10px; color: var(--sh-muted); font-size: .82rem; font-weight: 600; line-height: 1.5; }
.sh-rotator__toggle {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); border: 0; white-space: nowrap;
}
/* The items share one grid cell. The stage clips the sideways slide, with room left for focus rings. */
.sh-rotator__stage { display: grid; margin: -6px; padding: 6px; overflow: hidden; }
.sh-home .sh-rotator__item {
    grid-area: 1 / 1; position: relative; z-index: 1;
    display: flex; flex-direction: column; min-width: 0; color: var(--sh-ink);
}
.sh-home .sh-rotator__item:first-child { z-index: 3; }
.sh-home a.sh-rotator__item:hover, .sh-home a.sh-rotator__item:focus { color: var(--sh-ink); }
.sh-rotator__item > * { position: relative; }
.sh-rotator__item:not(:first-child) > * { opacity: 0; }

/* The picture slides a little less than the words, for a touch of depth */
.sh-rotator__media {
    --sh-rot-depth: .6;
    position: relative; display: block; overflow: hidden; aspect-ratio: 2 / 1;
    border-radius: var(--sh-radius); background: var(--sh-surface-2);
}
.sh-rotator__img, .sh-rotator__img img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.sh-rotator__img { transition: transform .8s var(--sh-ease); }
.sh-rotator__item--story:hover .sh-rotator__img { transform: scale(1.04); }
.sh-rotator__media--tile { display: grid; place-items: center; background: color-mix(in srgb, var(--tone-tint) 82%, transparent); }
/* Each app in its own colour, lit diagonally like the pregnancy app's icon */
.sh-rotator__item--app .sh-rotator__media--tile  { background: linear-gradient(45deg, #eef3fd 0%, #d4e2fa 100%); }
.sh-rotator__item--baby .sh-rotator__media--tile { background: linear-gradient(45deg, #f5f1fc 0%, #ddd2f2 100%); }
/* White tiles (and the pregnancy app's own icon), rounded like the app icon, with soft rings */
.sh-rotator__tile, .sh-rotator__app-icon img {
    width: 84px; height: 84px; border-radius: 13px;
    box-shadow: 0 0 0 12px rgba(255, 255, 255, .34), 0 0 0 26px rgba(255, 255, 255, .16), 0 10px 24px rgba(60, 50, 40, .10);
}
.sh-rotator__tile { display: grid; place-items: center; align-content: center; background: #fff; color: var(--tone-ink); }
.sh-rotator__tile .sh-gauge { width: 58px; height: auto; }
.sh-rotator__app-icon img { display: block; }
/* The baby app's launch date as a little calendar page with a lavender month band */
.sh-rotator__cal { display: flex; flex-direction: column; overflow: hidden; }
.sh-rotator__cal small {
    display: block; width: 100%; padding: 5px 0 4px; background: var(--tone);
    color: #2b2147; font-size: .72rem; font-weight: 600; line-height: 1.25; text-align: center;
}
.sh-rotator__cal b { display: grid; place-items: center; flex: 1; width: 100%; color: var(--sh-ink); font-size: 2.1rem; font-weight: 600; line-height: 1; }

.sh-rotator__body { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; padding: 14px 6px 2px; }
.sh-rotator__kicker { color: var(--tone-ink, var(--sh-emerald-ink)); font-size: .82rem; font-weight: 600; line-height: 1.5; }
.sh-rotator__title { font-size: 1.1rem; font-weight: 600; line-height: 1.5; }
.sh-rotator__text { color: var(--sh-muted); font-size: .92rem; line-height: 1.55; }
.sh-rotator__more { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; color: var(--sh-blue); font-size: .92rem; font-weight: 600; }
.sh-rotator__more svg { width: 14px; height: 14px; transition: transform .3s var(--sh-ease); }
.sh-rotator__item:hover .sh-rotator__more svg { transform: translateX(3px); }


/* Progress: the current item's bar fills; the button pauses and resumes */
.sh-rotator__nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 2px 0 6px; }
.sh-rotator__bars { display: flex; gap: 6px; }
.sh-rotator__bar { position: relative; width: 22px; height: 3px; overflow: hidden; border-radius: 3px; background: rgba(18, 18, 18, .12); }
.sh-rotator__bar i { position: absolute; inset: 0; border-radius: inherit; background: var(--sh-ink-2); transform: scaleX(0); transform-origin: left center; }
.sh-home .sh-rotator__pause {
    display: grid; place-items: center; flex: none; width: 30px; height: 30px; margin: 0; border-radius: 50%;
    color: var(--sh-ink-2); cursor: pointer; transition: background-color .2s ease;
}
.sh-home .sh-rotator__pause:hover { background: rgba(18, 18, 18, .06); }
.sh-rotator__pause svg { width: 12px; height: 12px; fill: currentColor; }
.sh-rotator__play-icon,
.sh-rotator__toggle:checked ~ .sh-rotator__nav .sh-rotator__pause-icon { display: none; }
.sh-rotator__toggle:checked ~ .sh-rotator__nav .sh-rotator__play-icon { display: block; }
.sh-rotator__toggle:focus-visible ~ .sh-rotator__nav .sh-rotator__pause { outline: 3px solid var(--sh-blue); outline-offset: 2px; }

/* Timing: every item and its bar share one cycle; item i starts at i × 6s */
.sh-rotator__item,
.sh-rotator__item > *,
.sh-rotator__bar i {
    animation-timing-function: linear; animation-delay: calc(var(--i, 0) * 6s);
    animation-iteration-count: infinite; animation-fill-mode: backwards;
}
.sh-rotator--n2 .sh-rotator__item { animation-name: sh-rot-z-2; animation-duration: 12s; }
.sh-rotator--n2 .sh-rotator__item > * { animation-name: sh-rot-show-2; animation-duration: 12s; }
.sh-rotator--n2 .sh-rotator__bar i { animation-name: sh-rot-bar-2; animation-duration: 12s; }
.sh-rotator--n3 .sh-rotator__item { animation-name: sh-rot-z-3; animation-duration: 18s; }
.sh-rotator--n3 .sh-rotator__item > * { animation-name: sh-rot-show-3; animation-duration: 18s; }
.sh-rotator--n3 .sh-rotator__bar i { animation-name: sh-rot-bar-3; animation-duration: 18s; }
.sh-rotator--n4 .sh-rotator__item { animation-name: sh-rot-z-4; animation-duration: 24s; }
.sh-rotator--n4 .sh-rotator__item > * { animation-name: sh-rot-show-4; animation-duration: 24s; }
.sh-rotator--n4 .sh-rotator__bar i { animation-name: sh-rot-bar-4; animation-duration: 24s; }
.sh-rotator--n5 .sh-rotator__item { animation-name: sh-rot-z-5; animation-duration: 30s; }
.sh-rotator--n5 .sh-rotator__item > * { animation-name: sh-rot-show-5; animation-duration: 30s; }
.sh-rotator--n5 .sh-rotator__bar i { animation-name: sh-rot-bar-5; animation-duration: 30s; }

/* Pauses while the pointer rests on the panel, or with the pause button */
@media (hover: hover) {
    .sh-rotator:hover .sh-rotator__item,
    .sh-rotator:hover .sh-rotator__item > *,
    .sh-rotator:hover .sh-rotator__bar i { animation-play-state: paused; }
}
.sh-rotator__toggle:checked ~ .sh-rotator__stage .sh-rotator__item,
.sh-rotator__toggle:checked ~ .sh-rotator__stage .sh-rotator__item > *,
.sh-rotator__toggle:checked ~ .sh-rotator__nav .sh-rotator__bar i { animation-play-state: paused; }

/* Keyboard: the focused item shows and stays, so every link can be reached */
.sh-rotator__stage:focus-within .sh-rotator__item,
.sh-rotator__stage:focus-within .sh-rotator__item > *,
.sh-rotator__stage:focus-within ~ .sh-rotator__nav .sh-rotator__bar i { animation: none; }
.sh-home .sh-rotator__stage:focus-within .sh-rotator__item { z-index: 1; }
.sh-rotator__stage:focus-within .sh-rotator__item > * { opacity: 0; }
.sh-home .sh-rotator__stage:focus-within .sh-rotator__item:focus-within { z-index: 3; }
.sh-rotator__stage:focus-within .sh-rotator__item:focus-within > * { opacity: 1; }

@media (max-width: 575.98px) {
    .sh-rotator { --sh-rot-shift: 24px; }
    .sh-glow__blob--emerald { display: none; }
}

/* Keyframes (generated for 2–5 items): each item slides in from the right, holds, then slides away
   to the left as the next arrives. The example questions in the search box move the same way. */
@keyframes sh-rot-show-2 {
    0% { opacity: 0; transform: translateX(calc(var(--sh-rot-shift) * var(--sh-rot-depth, 1))); filter: blur(var(--sh-rot-blur)); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
    7.5%, 45.833% { opacity: 1; transform: translateX(0); filter: blur(0); animation-timing-function: cubic-bezier(.5, 0, .75, 0); }
    50.833%, 100% { opacity: 0; transform: translateX(calc(var(--sh-rot-shift) * var(--sh-rot-depth, 1) * -1)); filter: blur(var(--sh-rot-blur)); }
}
@keyframes sh-rot-z-2 { 0% { z-index: 1; } .01%, 50% { z-index: 3; } 50.01%, 100% { z-index: 1; } }
@keyframes sh-rot-bar-2 { 0% { transform: scaleX(0); opacity: 1; } 50% { transform: scaleX(1); opacity: 1; } 53.333%, 100% { transform: scaleX(1); opacity: 0; } }
@keyframes sh-rot-show-3 {
    0% { opacity: 0; transform: translateX(calc(var(--sh-rot-shift) * var(--sh-rot-depth, 1))); filter: blur(var(--sh-rot-blur)); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
    5%, 30.556% { opacity: 1; transform: translateX(0); filter: blur(0); animation-timing-function: cubic-bezier(.5, 0, .75, 0); }
    33.889%, 100% { opacity: 0; transform: translateX(calc(var(--sh-rot-shift) * var(--sh-rot-depth, 1) * -1)); filter: blur(var(--sh-rot-blur)); }
}
@keyframes sh-rot-z-3 { 0% { z-index: 1; } .01%, 33.333% { z-index: 3; } 33.343%, 100% { z-index: 1; } }
@keyframes sh-rot-bar-3 { 0% { transform: scaleX(0); opacity: 1; } 33.333% { transform: scaleX(1); opacity: 1; } 35.556%, 100% { transform: scaleX(1); opacity: 0; } }
@keyframes sh-rot-show-4 {
    0% { opacity: 0; transform: translateX(calc(var(--sh-rot-shift) * var(--sh-rot-depth, 1))); filter: blur(var(--sh-rot-blur)); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
    3.75%, 22.917% { opacity: 1; transform: translateX(0); filter: blur(0); animation-timing-function: cubic-bezier(.5, 0, .75, 0); }
    25.417%, 100% { opacity: 0; transform: translateX(calc(var(--sh-rot-shift) * var(--sh-rot-depth, 1) * -1)); filter: blur(var(--sh-rot-blur)); }
}
@keyframes sh-rot-z-4 { 0% { z-index: 1; } .01%, 25% { z-index: 3; } 25.01%, 100% { z-index: 1; } }
@keyframes sh-rot-bar-4 { 0% { transform: scaleX(0); opacity: 1; } 25% { transform: scaleX(1); opacity: 1; } 26.667%, 100% { transform: scaleX(1); opacity: 0; } }
@keyframes sh-rot-show-5 {
    0% { opacity: 0; transform: translateX(calc(var(--sh-rot-shift) * var(--sh-rot-depth, 1))); filter: blur(var(--sh-rot-blur)); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
    3%, 18.333% { opacity: 1; transform: translateX(0); filter: blur(0); animation-timing-function: cubic-bezier(.5, 0, .75, 0); }
    20.333%, 100% { opacity: 0; transform: translateX(calc(var(--sh-rot-shift) * var(--sh-rot-depth, 1) * -1)); filter: blur(var(--sh-rot-blur)); }
}
@keyframes sh-rot-z-5 { 0% { z-index: 1; } .01%, 20% { z-index: 3; } 20.01%, 100% { z-index: 1; } }
@keyframes sh-rot-bar-5 { 0% { transform: scaleX(0); opacity: 1; } 20% { transform: scaleX(1); opacity: 1; } 21.333%, 100% { transform: scaleX(1); opacity: 0; } }

/* ---------- Article cards ---------- */

.sh-card { margin: 0; min-width: 0; }
.sh-home .sh-card__link {
    display: flex; flex-direction: column; height: 100%;
    background: var(--sh-surface); border-radius: var(--sh-radius); overflow: hidden;
    color: inherit; box-shadow: var(--sh-shadow);
    transition: transform .4s var(--sh-ease), box-shadow .4s var(--sh-ease);
}
.sh-home .sh-card__link:hover, .sh-home .sh-card__link:focus { color: inherit; transform: translateY(-4px); box-shadow: var(--sh-shadow-hover); }
.sh-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--sh-surface-2); }
.sh-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--sh-ease); }
.sh-card__link:hover .sh-card__img { transform: scale(1.04); }
/* Imagify serves WebP by wrapping images in <picture> and moves the class to the wrapper,
   so the image inside also has to fill the frame. */
.sh-card__img img, .sh-topic__img img, .sh-pregnancy__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sh-card__body { display: flex; flex-direction: column; gap: 8px; padding: 18px 22px 24px; }
/* The topic's name in the card's own topic colour (shohay_home_card sets the tone) */
.sh-card__label { color: var(--tone-ink, var(--sh-emerald-ink)); font-size: .88rem; font-weight: 600; line-height: 1.5; }
.sh-card__title {
    margin: 0; color: var(--sh-ink); font-size: 1.12rem; font-weight: 600; line-height: 1.55;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---------- Latest ---------- */

.sh-latest { padding-top: clamp(40px, 5vw, 72px); }
.sh-latest__grid { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 576px) { .sh-latest__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) { .sh-latest__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Phones: compact rows with a small square picture */
@media (max-width: 575.98px) {
    .sh-latest__grid { gap: 0; }
    .sh-home .sh-latest .sh-card__link {
        flex-direction: row; align-items: center; gap: 16px; padding: 14px 0;
        background: transparent; border-radius: 0; box-shadow: none; overflow: visible;
        border-bottom: 1px solid var(--sh-line);
    }
    .sh-home .sh-latest .sh-card__link:hover { transform: none; box-shadow: none; }
    .sh-latest .sh-card__media { flex: none; width: 92px; aspect-ratio: 1 / 1; border-radius: var(--sh-radius-sm); }
    .sh-latest .sh-card__body { padding: 0; gap: 4px; }
    .sh-latest .sh-card__title { font-size: 1.02rem; line-height: 1.5; }
    .sh-latest .sh-card:last-child .sh-card__link { border-bottom: 0; }
}

/* ---------- Pregnancy (rose) ---------- */

.sh-pregnancy { background: linear-gradient(180deg, var(--sh-rose-tint) 0%, #fef8fa 100%); }
.sh-pregnancy__intro {
    display: grid; grid-template-columns: 1fr; align-items: center;
    gap: clamp(32px, 5vw, 80px); margin-bottom: clamp(40px, 5.5vw, 72px);
}
.sh-pregnancy__text .sh-lead { margin: 18px 0 28px; max-width: 34em; color: var(--sh-ink-2); font-size: clamp(1.05rem, 1rem + .3vw, 1.22rem); line-height: 1.8; }
.sh-pregnancy .sh-linklist { border-top-color: rgba(155, 58, 94, .14); }
.sh-pregnancy .sh-linklist li { border-bottom-color: rgba(155, 58, 94, .14); }
.sh-pregnancy__media {
    position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--sh-radius-lg);
    background: #fff; box-shadow: 0 28px 56px rgba(155, 58, 94, .12);
}
.sh-pregnancy__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 992px) {
    .sh-pregnancy__intro { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
}

/* Row of cards: swipeable on phones, a 4-column grid on larger screens */
.sh-scroller {
    display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: 16px;
    margin: 0 -24px; padding: 4px 24px 12px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 24px;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.sh-scroller::-webkit-scrollbar { display: none; }
.sh-scroller > * { scroll-snap-align: start; }
@media (min-width: 768px) {
    .sh-scroller { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; overflow: visible; }
}
@media (min-width: 992px) {
    .sh-scroller { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- Topics ---------- */

/* Swipeable on phones, a grid from tablet up */
.sh-topics__grid {
    display: grid; grid-auto-flow: column; grid-auto-columns: 86%; gap: 16px;
    margin: 0 -24px; padding: 4px 24px 16px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 24px; scrollbar-width: none;
}
.sh-topics__grid::-webkit-scrollbar { display: none; }
.sh-topics__grid > * { scroll-snap-align: start; }
@media (min-width: 768px) {
    .sh-topics__grid { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; overflow: visible; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
    .sh-topics__grid > .sh-topic:last-child:nth-child(odd) { grid-column: 1 / -1; flex-direction: row; }
    .sh-topics__grid > .sh-topic:last-child:nth-child(odd) .sh-topic__media { flex: 0 0 44%; aspect-ratio: auto; }
}
@media (min-width: 992px) { .sh-topics__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.sh-topic {
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--sh-surface); border-radius: var(--sh-radius); box-shadow: var(--sh-shadow);
}
.sh-topic__media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--sh-surface-2); }
.sh-topic__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--sh-ease); }
.sh-topic:hover .sh-topic__img { transform: scale(1.04); }
.sh-topic__body { display: flex; flex-direction: column; flex: 1; padding: 22px 24px 26px; }
.sh-topic__name { margin-bottom: 8px; }
.sh-home .sh-topic__name:hover { color: var(--sh-ink); }
.sh-topic__title { margin: 0 0 10px; font-size: 1.28rem; font-weight: 600; line-height: 1.5; }
.sh-home .sh-topic__title a { color: var(--sh-ink); transition: color .2s ease; }
.sh-home .sh-topic__title a:hover { color: var(--sh-blue); }
.sh-topic__desc { margin: 0 0 18px; color: var(--sh-ink-2); font-size: 1rem; line-height: 1.8; }
.sh-topic .sh-linklist { margin-bottom: 22px; }
.sh-topic__more { margin-top: auto; align-self: flex-start; }

/* ---------- Tools (mist) ---------- */

.sh-tools { background: var(--sh-mist); }
.sh-tools__grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 576px) { .sh-tools__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Six tools: three and three on a computer (owner, 9 October 2026, with the blood sugar checker) */
@media (min-width: 992px) { .sh-tools__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.sh-home .sh-tool {
    position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 18px;
    padding: 24px 22px 26px; min-height: 200px; text-align: left;
    background: var(--sh-surface); border-radius: var(--sh-radius); box-shadow: var(--sh-shadow);
    color: var(--sh-ink);
    transition: transform .4s var(--sh-ease), box-shadow .4s var(--sh-ease);
}
.sh-home .sh-tool:hover, .sh-home .sh-tool:focus { color: var(--sh-ink); transform: translateY(-4px); box-shadow: var(--sh-shadow-hover); }
.sh-tool__icon {
    display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 13px;
    background: var(--tone-tint); color: var(--tone-ink);
}
.sh-tool__icon svg { width: 26px; height: 26px; }
.sh-tool__text { display: flex; flex-direction: column; gap: 6px; }
.sh-tool__name { font-size: 1.08rem; font-weight: 600; line-height: 1.5; }
.sh-tool__desc { color: var(--sh-muted); font-size: .95rem; line-height: 1.65; }
.sh-tool__go { position: absolute; top: 24px; right: 20px; color: #b9b9c0; transition: transform .3s var(--sh-ease), color .2s ease; }
.sh-tool__go svg { width: 18px; height: 18px; }
.sh-tool:hover .sh-tool__go { color: var(--tone-ink); transform: translateX(3px); }

@media (max-width: 991.98px) {
    .sh-tools__grid > .sh-tool:last-child:nth-child(odd) { grid-column: 1 / -1; }
    .sh-home .sh-tool { flex-direction: row; align-items: center; gap: 16px; min-height: 0; padding: 16px 44px 16px 16px; }
    .sh-tool__icon { width: 48px; height: 48px; border-radius: 12px; }
    .sh-tool__go { top: 50%; right: 16px; margin-top: -9px; }
}

/* ---------- Trust: numbers and press ---------- */

.sh-numbers {
    padding: clamp(28px, 4vw, 44px) clamp(16px, 4vw, 48px);
    border-radius: var(--sh-radius-lg); background: var(--sh-mist); text-align: center;
}
.sh-numbers__title { margin: 0 0 clamp(20px, 3vw, 30px); color: var(--sh-ink); font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem); font-weight: 600; line-height: 1.4; }
.sh-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
.sh-stat { display: flex; flex-direction: column-reverse; align-items: center; padding: 2px 12px; text-align: center; }
.sh-stat + .sh-stat { border-left: 1px solid rgba(18, 18, 18, .1); }
.sh-stat__num { margin: 0; color: var(--sh-ink); font-size: clamp(1.35rem, 1rem + 1.3vw, 2.1rem); font-weight: 600; line-height: 1.3; white-space: nowrap; }
.sh-stat__label { margin-top: 6px; color: var(--sh-muted); font-size: clamp(.86rem, .82rem + .2vw, .98rem); font-weight: 400; line-height: 1.5; }

.sh-press__title {
    margin: clamp(56px, 7vw, 88px) 0 clamp(20px, 2.5vw, 28px); text-align: center;
    color: var(--sh-ink); font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem); font-weight: 600; line-height: 1.4;
}
.sh-press {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
    list-style: none; margin: 0; padding: 0;
}
.sh-press__item {
    display: grid; place-items: center; flex: 0 0 calc((100% - 36px) / 4); height: 84px; padding: 12px 14px;
    background: #fff; border: 1px solid rgba(18, 18, 18, .08); border-radius: var(--sh-radius);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    transition: transform .35s var(--sh-ease), box-shadow .35s var(--sh-ease);
}
.sh-press__item:hover { transform: translateY(-2px); box-shadow: var(--sh-shadow-hover); }
.sh-press__item a { display: grid; place-items: center; width: 100%; height: 100%; border-radius: inherit; }
.sh-press__item img { width: auto; max-width: 100%; max-height: 30px; object-fit: contain; }
.sh-press__item.is-boxed img { max-height: 50px; border-radius: 8px; }
@media (min-width: 992px) { .sh-press__item { flex: 1 1 0; height: 92px; } }
@media (max-width: 575.98px) {
    .sh-press { gap: 8px; }
    .sh-press__item { flex-basis: calc((100% - 24px) / 4); height: 64px; padding: 8px; border-radius: var(--sh-radius-sm); }
    .sh-press__item img { max-height: 20px; }
    .sh-press__item.is-boxed img { max-height: 40px; border-radius: 6px; }
}

/* ---------- Newsletter (duck egg; Brevo form restyled from outside) ---------- */

.sh-newsletter { padding-top: 0; }
.sh-newsletter__card {
    padding: clamp(36px, 5vw, 60px) clamp(20px, 5vw, 60px);
    border-radius: var(--sh-radius-lg); text-align: center;
    background:
        radial-gradient(600px 240px at 50% 0%, rgba(107, 147, 147, .16), rgba(107, 147, 147, 0) 70%),
        var(--sh-duck-egg-tint);
}
.sh-newsletter .sib-form { padding: 0 !important; background: transparent !important; font-family: inherit !important; }
.sh-newsletter #sib-form-container { max-width: none; }
.sh-newsletter #sib-container {
    max-width: none !important; padding: 0 !important; margin: 0 !important;
    background: transparent !important; border: 0 !important; border-radius: 0 !important;
}
.sh-newsletter #sib-form { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 0 10px; }
.sh-newsletter #sib-form > div { flex: 1 1 100%; }
.sh-newsletter #sib-form > div:has(.sib-input) { flex: 1 1 300px; max-width: 420px; }
.sh-newsletter #sib-form > div:has(.sib-form-block__button) { flex: 0 0 auto; }
.sh-newsletter .sib-form-block { padding: 0 !important; }
.sh-newsletter .sib-form-block p,
.sh-newsletter .sib-text-form-block p { font-family: 'Noto Serif Bengali', serif !important; text-align: center !important; }
.sh-newsletter #sib-form > div:nth-child(1) .sib-form-block p {
    margin: 0 !important; color: var(--sh-ink) !important;
    font-size: clamp(1.5rem, 1.15rem + 1.2vw, 2rem) !important; font-weight: 600 !important; line-height: 1.4 !important;
}
.sh-newsletter #sib-form > div:nth-child(2) .sib-text-form-block p {
    margin: 10px 0 26px !important; color: var(--sh-ink-2) !important;
    font-size: 1.06rem !important; line-height: 1.7 !important;
}
.sh-newsletter .sib-input { padding: 0 !important; }
.sh-newsletter .entry__field { margin: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
.sh-newsletter #EMAIL {
    width: 100%; height: 50px; padding: 0 18px !important; margin: 0;
    border: 1px solid rgba(18, 18, 18, .1) !important; border-radius: var(--sh-radius-btn) !important; background: #fff !important;
    color: var(--sh-ink); font-family: 'Noto Serif Bengali', serif !important; font-size: 1.02rem !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
.sh-newsletter #EMAIL:focus { outline: 0; border-color: rgba(21, 101, 192, .5) !important; box-shadow: 0 0 0 4px rgba(21, 101, 192, .12); }
.sh-newsletter .sib-form-block__button {
    height: 50px; padding: 0 26px !important; margin: 0 !important;
    border: 0 !important; border-radius: var(--sh-radius-btn) !important; background: var(--sh-blue) !important;
    color: #fff !important; font-family: 'Noto Serif Bengali', serif !important; font-size: 1rem !important; font-weight: 600 !important;
    cursor: pointer; transition: background-color .2s ease;
}
.sh-newsletter .sib-form-block__button:hover { background: var(--sh-blue-deep) !important; }
.sh-newsletter .entry__error { text-align: left; }
.sh-newsletter .sib-form-message-panel { max-width: 560px; margin: 0 auto 20px !important; border-radius: var(--sh-radius) !important; }
/* Google's reCAPTCHA badge sits inside the form, under the button (data-badge="inline"), instead of a
   sentence about it (owner): Google asks for one or the other. It appears only once someone starts using
   the form, when reCAPTCHA loads. Brevo's script loads only then too, so WP Rocket's CSS trimming never
   sees the classes it adds: the rules the form needs are kept here under .sh- (in the trimming's safelist). */
.sh-newsletter .grecaptcha-badge { margin: 18px auto 0; }
.sh-newsletter .sib-form-message-panel--active { display: inline-block; }
.sh-newsletter .sib-form-block__button-disabled { opacity: .5; }

/* ---------- Small screens ---------- */

@media (max-width: 575.98px) {
    .sh-scroller { margin: 0 -16px; padding: 4px 16px 12px; scroll-padding: 0 16px; }
    .sh-topics__grid { margin: 0 -16px; padding: 4px 16px 16px; scroll-padding: 0 16px; }
    .sh-section__head { flex-wrap: wrap; align-items: baseline; }
    .sh-stat { padding: 2px 6px; }
    .sh-stat__num { font-size: clamp(1.1rem, 5vw, 1.4rem); }
    .sh-newsletter #sib-form > div:has(.sib-form-block__button) { flex: 1 1 100%; margin-top: 10px; }
    .sh-newsletter .sib-form-block__button { width: 100%; }
}

/* ---------- Motion preferences ---------- */

@media (prefers-reduced-motion: reduce) {
    .sh-home *, .sh-home *::before, .sh-home *::after { transition: none !important; animation: none !important; }
    .sh-home .sh-card__link:hover, .sh-home .sh-tool:hover { transform: none; }
    .sh-card__link:hover .sh-card__img, .sh-topic:hover .sh-topic__img, .sh-rotator__item--story:hover .sh-rotator__img { transform: none; }
    .sh-rotator__nav { display: none; }
}