/* Home page (docs/SPEC-V8.md §3, option 8 "खोज पहले"): नमस्ते and the one big box on today's city photograph, four picture tiles, the alert line, three stories and one row of city places. Loaded by / and /en only; 12 KB budget; tokens only. */
@layer components {
.home8{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;padding-top:8px}
.home8>*{width:100%;max-width:1000px;justify-self:center}
.hello{display:grid;justify-items:center;gap:10px;padding:32px 0 4px;text-align:center}
.hello-title{font-family:var(--font-display);font-weight:800;font-size:clamp(36px,8vw,58px);line-height:1.15;color:var(--ink)}
.hello-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 10px;font-size:var(--t-sm);color:var(--muted)}
.hello-sep{margin-right:10px}
.hello-box{display:flex;align-items:center;gap:10px;width:100%;max-width:720px;min-height:62px;margin-top:14px;padding:0 7px 0 20px;box-sizing:border-box;background:var(--surface);border-radius:var(--r-pill);box-shadow:var(--shadow),inset 0 0 0 1.5px var(--line)}
.hello-box:focus-within{outline:3px solid var(--focus);outline-offset:2px}
.hello-box>.icon{flex:none;color:var(--muted)}
.hello-input{flex:1;min-width:0;min-height:48px;border:0;outline:0;background:none;color:var(--ink);font-size:var(--t-md)}
.hello-input::placeholder{color:var(--muted);opacity:1}
.hello-input::-webkit-search-cancel-button{display:none}
.hello-go{display:inline-flex;align-items:center;gap:8px;flex:none;min-height:48px;padding:0 22px;border-radius:var(--r-pill);background:var(--ink);color:var(--on-ink);font-weight:700}
.hello-go .icon{color:var(--sun)}
.hello-go:hover{background:var(--ink-2)}
.hello-quick{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:6px}
.hello-chip{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:var(--r-pill);background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--line);font-size:var(--t-sm);font-weight:600;color:var(--ink-2)}
.hello-chip:hover{color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
/* the greeting on today's photograph of the city (2026-10-19): an even dark veil keeps the white text readable (no gradients) */
.hello.has-photo{position:relative;isolation:isolate;overflow:hidden;grid-template-columns:minmax(0,1fr);align-content:end;min-height:440px;padding:64px 16px 14px;border-radius:28px;box-shadow:var(--shadow-lift)}
.hello-photo{position:absolute;inset:0;z-index:-2;background:var(--surface-2)}
.hello-photo>img{display:block;width:100%;height:100%;object-fit:cover}
.hello-scrim{position:absolute;inset:0;z-index:-1;background:rgb(12 12 12 / .5)}
.hello.has-photo .hello-title{color:var(--on-ink);text-shadow:0 2px 18px rgb(0 0 0 / .35)}
.hello.has-photo .hello-meta{color:var(--on-ink);opacity:.92}
.hello.has-photo .hello-box{box-shadow:0 12px 32px rgb(0 0 0 / .28)}
.hello.has-photo .hello-chip{background:color-mix(in srgb,var(--surface) 92%,transparent);box-shadow:none;color:var(--ink)}
.hello.has-photo .hello-chip:hover{background:var(--surface)}
.hello-caption{display:flex;flex-wrap:wrap;justify-content:center;gap:0 8px;margin-top:10px;font-size:11.5px;line-height:1.5;color:var(--on-ink);opacity:.85}
.hello-caption>.media-credit{display:inline;margin:0;font-size:inherit;color:inherit}
.hello-caption a{color:inherit}
.tile8-mark{background:var(--tone,var(--surface-2));color:var(--tone-ink,var(--ink))}
.tile8-mark>svg:not(.icon){width:38px;height:38px}
.city8-list{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(150px,46%);gap:12px;scroll-padding-inline:var(--pad-l) var(--pad-r);margin-inline:calc(-1 * var(--pad-l)) calc(-1 * var(--pad-r));padding:2px var(--pad-r) 8px var(--pad-l);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.city8-list>li{scroll-snap-align:start}
.city8-card{display:grid;gap:6px;color:var(--ink)}
.city8-pic{display:block;aspect-ratio:4/3;overflow:hidden;border-radius:18px;background:var(--surface-2)}
.city8-pic>img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.city8-card:hover .city8-pic>img{transform:scale(1.04)}
.city8-name{font-weight:600;font-size:15px;line-height:1.35}
.city8-card>.media-credit{margin:0;font-size:11px}
.tiles8 ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.tile8{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:2px 12px;height:100%;box-sizing:border-box;padding:14px;background:var(--surface);border-radius:var(--r-card);box-shadow:var(--shadow);color:var(--ink);transition:transform .15s ease,box-shadow .15s ease}
.tile8:hover{box-shadow:var(--shadow-lift);transform:translateY(-2px)}
.tile8-mark{grid-row:span 2;display:grid;place-items:center;width:52px;height:52px;border-radius:16px}
.tile8-name{font-family:var(--font-display);font-weight:800;font-size:var(--t-md);line-height:1.25}
.tile8-sub{font-size:var(--t-xs);color:var(--muted)}
.tile8.is-red .tile8-mark{background:color-mix(in srgb,var(--red) 12%,var(--surface));color:var(--red);--art-accent:var(--red)}
.tile8.is-red .tile8-name{color:var(--red)}
.alert-line{display:flex;align-items:center;gap:10px;justify-self:center;width:auto;min-width:0;max-width:min(1000px,100%);min-height:44px;margin-top:-12px;padding:0 14px 0 16px;box-sizing:border-box;border-radius:var(--r-pill);background:color-mix(in srgb,var(--red) 8%,var(--surface));color:color-mix(in srgb,var(--red) 80%,var(--ink));font-size:var(--t-sm);font-weight:700}
.alert-line-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--red)}
.alert-line-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.alert-line>.icon{flex:none}
.stories8{margin-top:8px}
.story8-list{display:grid}
.story8{display:grid;grid-template-columns:96px minmax(0,1fr);align-items:center;gap:14px;padding:14px 0;border-top:1px solid var(--line);color:var(--ink)}
.story8-list>li:first-child>.story8{border-top:0}
.story8-pic{display:block;aspect-ratio:4/3;overflow:hidden;border-radius:12px;background:var(--surface-2)}
.story8-pic>img,.story8-pic>.tile{display:block;width:100%;height:100%;object-fit:cover;border-radius:0}
.story8-body{display:grid;gap:4px;min-width:0}
.story8-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-weight:600;font-size:var(--t-md);line-height:1.45}
.story8:hover .story8-title{text-decoration:underline;text-underline-offset:.2em}
.story8-time{font-size:var(--t-xs);color:var(--muted)}
@media (min-width:600px){
.tile8{grid-template-columns:none;align-items:start;gap:12px;padding:20px}
.tile8-mark{grid-row:auto}
.tile8-name{font-size:var(--t-lg)}
.tile8-sub{margin-top:-10px;font-size:var(--t-sm)}
.story8-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.story8{grid-template-columns:none;align-items:start;gap:12px;padding:0;border:0}
.story8-pic{aspect-ratio:16/10;border-radius:var(--r-img)}
.story8-title{font-size:18px}
}
@media (min-width:900px){
.tiles8 ul{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.hello{padding-top:56px}
.hello.has-photo{min-height:480px;padding:96px 40px 18px;border-radius:32px}
.tile8-mark{width:60px;height:60px;border-radius:18px}
.tile8-mark>svg:not(.icon){width:44px;height:44px}
.city8-list{grid-auto-flow:row;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-inline:0;padding:0;overflow:visible}
}
@media (prefers-reduced-motion:reduce){.tile8,.city8-pic>img{transition:none}.tile8:hover,.city8-card:hover .city8-pic>img{transform:none}}
}