/* Home: search + live stamp beside today's strongest deals, then rails and the four Israel answers.
   Builds on site.css; only what is unique to the homepage. */

.home-top { display: grid; gap: 4px; }
.home-intro { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding-block: 12px 10px; align-content: start; min-width: 0; }
.home-intro__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-width: 0; }
.home-intro h1 { font-size: clamp(1.9rem, 6vw, 2.75rem); line-height: 1.08; letter-spacing: -.015em; }
.home-intro__lede { display: none; color: var(--soft); font-size: 1.05rem; max-width: 46ch; }
@media (min-width: 640px) { .home-intro__lede { display: block; } }
.home-intro__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; color: var(--soft); font-size: .9rem; }
.home-chips { margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
.home-picks { padding-block: 14px 8px; }
.home-picks__grid > :nth-child(n+5) { display: none; }
@media (min-width: 640px) { .home-picks__grid > :nth-child(n+5) { display: flex; } .home-picks__grid > :nth-child(n+7) { display: none; } }
@media (min-width: 1024px) {
    .home-top { grid-template-columns: minmax(300px, 360px) minmax(0, 1fr); gap: 40px; align-items: start; padding-top: 6px; }
    .home-intro { position: sticky; top: calc(var(--header-h) + 16px); padding-top: 18px; }
    .home-chips { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; }
    .home-picks__grid > :nth-child(n+5) { display: flex; }
}
/* Desktop rails use the grid's card width (six across), so every card on the page is the same size. */
@media (min-width: 1024px) { .home-rail { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; } .home-rail > :nth-child(n+7) { display: none; } }

/* The four Israel answers: plain rows, not cards */
.home-answers { list-style: none; margin: 0; padding: 0; background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r-panel); overflow: hidden; }
.home-answers li + li { border-top: 1px solid var(--rule); }
.home-answers a { display: grid; grid-template-columns: 22px minmax(0, 1fr) 22px; align-items: center; gap: 14px; padding: 16px 18px; text-decoration: none; height: 100%; transition: background var(--d-s); }
.home-answers a:hover { background: color-mix(in srgb, var(--stage) 60%, var(--panel)); }
.home-answers a:focus-visible { outline-offset: -3px; border-radius: 0; }
.home-answers__icon { color: var(--soft); align-self: start; margin-top: 2px; }
.home-answers__text { display: grid; gap: 2px; }
.home-answers__text strong { font-weight: 700; font-size: 1.02rem; line-height: 1.3; }
.home-answers__text span { color: var(--soft); font-size: .92rem; line-height: 1.5; }
.home-answers__chev { color: var(--soft); transition: transform var(--d-s) var(--e-out); }
.home-answers a:hover .home-answers__chev { transform: translateX(-3px); }
@media (min-width: 900px) {
    .home-answers { display: grid; grid-template-columns: 1fr 1fr; }
    .home-answers li:nth-child(2) { border-top: 0; }
    .home-answers li:nth-child(even) { border-inline-start: 1px solid var(--rule); }
}

/* Latest guides */
.home-posts { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.home-post { position: relative; display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 12px; align-items: center; }
.home-post img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; background: var(--stage); transition: opacity var(--d-s); }
.home-post__body { display: grid; gap: 4px; }
.home-post h3 { font-size: 1rem; font-weight: 600; line-height: 1.35; letter-spacing: 0; }
.home-post h3 a { text-decoration: none; }
.home-post h3 a::after { content: ""; position: absolute; inset: 0; }
.home-post:hover h3 a { text-decoration: underline; }
.home-post:hover img { opacity: .9; }
.home-post time { color: var(--soft); font-size: .85rem; }
@media (min-width: 768px) {
    .home-posts { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
    .home-post { grid-template-columns: 1fr; align-items: start; gap: 10px; }
}

.home-faq .faq { max-width: 860px; }
.home-faq__links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; }

/* Phones: tighter hero rhythm so the first deal's buy button sits in the first screen (390×844). */
@media (max-width: 639px) {
    .home-intro { gap: 8px; padding-block: 4px 0; }
    .home-intro h1 { font-size: 1.8rem; }
    .home-picks { padding-top: 10px; }
    .home-picks .section__head { margin-bottom: 8px; }
}
/* Phones: the stamp sits on its own short line; the chips scroll on their own, with a peek and an end-edge fade. */
@media (max-width: 639px) {
    .home-intro__row { gap: 8px; }
    .home-intro__meta .stamp { padding-block: 2px; font-size: .82rem; }
    .home-chips { -webkit-mask-image: linear-gradient(to right, transparent, #000 32px); mask-image: linear-gradient(to right, transparent, #000 32px); }
}
.home-aud--compact .section__head { margin-bottom: 0; }