/* v1.27.0 — Homepage production/value pass.
 * OWNER: front-page.php only.
 * Cascade: core -> design-system -> weather-components -> homepage.
 * Shared buttons, forms, states and section headings stay in shared owners. */

.demo27-home{min-width:0;padding-bottom:var(--space-11);background:var(--surface-page)}
.demo27-home :where(a,button,input){min-width:0}
.demo27-container{min-width:0}

/* Hero */
.demo27-hero{position:relative;isolation:isolate;overflow:hidden;background:var(--hero-deep);color:var(--hero-text)}
.demo27-hero-bg{position:absolute;inset:0;z-index:-3;background:url('../images/media/ha-noi-hero.webp') 58% 50%/cover no-repeat}
.demo27-hero-shade{position:absolute;inset:0;z-index:-2;background:rgba(9,42,25,.82)}
.demo27-hero-inner{min-height:430px;display:grid;grid-template-columns:minmax(0,1.55fr) minmax(280px,.72fr);align-items:center;gap:var(--space-9);padding-block:var(--space-9) 76px}
.demo27-current{min-width:0;max-width:820px}
.demo27-current-context{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);color:var(--hero-muted);font-size:var(--font-sm);font-weight:var(--weight-medium);line-height:1.4}
.demo27-current-context span{opacity:.6}
.demo27-current h1{max-width:760px;margin:var(--space-2) 0 0;color:#fff;font-size:clamp(40px,4.6vw,58px);line-height:1.04;letter-spacing:-.04em;text-wrap:balance}
.demo27-condition-row{display:grid;grid-template-columns:64px auto minmax(0,1fr);align-items:center;gap:var(--space-4);margin-top:var(--space-5)}
.demo27-weather-icon,.demo27-weather-svg{width:64px;height:64px;display:block;flex:0 0 64px}
.demo27-temp{max-width:100%;color:#fff;font-size:clamp(56px,5.8vw,76px);font-variant-numeric:tabular-nums;font-weight:var(--weight-bold);letter-spacing:-.055em;line-height:.92;overflow-wrap:anywhere}
.demo27-condition-copy{min-width:0;display:grid;gap:var(--space-1)}
.demo27-condition-copy b{max-width:100%;color:#fff;font-size:var(--font-h3);line-height:1.2;overflow-wrap:anywhere}
.demo27-condition-copy span{max-width:100%;color:var(--hero-muted);font-size:var(--font-sm);line-height:1.5;overflow-wrap:anywhere}
.demo27-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:var(--space-6);overflow:hidden;border:1px solid var(--hero-line);border-radius:var(--radius-lg);background:rgba(8,39,23,.5)}
.demo27-metric{min-width:0;display:grid;grid-template-columns:28px minmax(0,1fr);align-items:center;gap:var(--space-2);min-height:78px;padding:var(--space-3) var(--space-4);border-right:1px solid var(--hero-line);border-bottom:1px solid var(--hero-line)}
.demo27-metric:nth-child(3n){border-right:0}
.demo27-metric:nth-last-child(-n+3){border-bottom:0}
.demo27-metric-icon{width:28px;height:28px;display:grid;place-items:center;color:#fff;opacity:.94}
.demo27-metric-svg{width:22px;height:22px;display:block}
.demo27-metric>span:last-child{min-width:0;display:grid;gap:2px}
.demo27-metric small{color:var(--hero-muted);font-size:var(--font-xs);line-height:1.25}
.demo27-metric strong{max-width:100%;color:#fff;font-size:16px;line-height:1.2;overflow-wrap:anywhere}
.demo27-metric em{display:-webkit-box;max-width:100%;overflow:hidden;color:var(--hero-muted);font-size:var(--font-xs);font-style:normal;line-height:1.35;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:normal;overflow-wrap:anywhere}
.demo27-hero-meta{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4);margin-top:var(--space-3);color:var(--hero-muted);font-size:var(--font-xs);line-height:1.45}
.demo27-hero-meta a{color:#fff;text-decoration:underline;text-underline-offset:3px}

.demo27-hero-actions{align-self:center;display:grid;gap:var(--space-3);padding:var(--space-5);border:1px solid rgba(255,255,255,.24);border-radius:var(--radius-xl);background:rgba(10,46,27,.72)}
.demo27-hero-actions-kicker{color:var(--hero-muted);font-size:var(--font-xs);font-weight:var(--weight-bold);letter-spacing:.04em;text-transform:uppercase}
.demo27-place-pill{min-height:68px;display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:var(--space-3);padding:var(--space-3);border:1px solid rgba(255,255,255,.22);border-radius:var(--radius-lg);background:rgba(255,255,255,.08);color:#fff;text-decoration:none;transition:background-color var(--transition),border-color var(--transition)}
.demo27-place-pill:hover,.demo27-place-pill:focus-visible{border-color:rgba(255,255,255,.42);background:rgba(255,255,255,.13);color:#fff}
.demo27-place-icon-wrap{width:44px;height:44px;display:grid;place-items:center;border-radius:var(--radius-md);background:rgba(255,255,255,.12)}
.demo27-place-icon{width:24px;height:24px;display:block}
.demo27-place-pill>span:nth-child(2){min-width:0;display:grid;gap:2px}
.demo27-place-pill strong{max-width:100%;color:#fff;font-size:16px;line-height:1.25;overflow-wrap:anywhere}
.demo27-place-pill small{max-width:100%;color:var(--hero-muted);font-size:var(--font-xs);line-height:1.4;overflow-wrap:anywhere}
.demo27-place-pill>b{font-size:18px;font-weight:var(--weight-regular)}
.demo27-hero-action-links{display:grid;border-top:1px solid rgba(255,255,255,.16)}
.demo27-hero-action-links>a{min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);border-bottom:1px solid rgba(255,255,255,.16);color:#fff;font-size:var(--font-sm);font-weight:var(--weight-medium);text-decoration:none}
.demo27-hero-action-links>a:hover,.demo27-hero-action-links>a:focus-visible{text-decoration:underline;text-underline-offset:3px}
.demo27-hero-action-links b{font-weight:var(--weight-regular)}
.demo27-hero-actions-note{color:var(--hero-muted);font-size:var(--font-xs);line-height:1.5}
.demo27-hero-error{grid-column:1/-1;max-width:780px;border-color:var(--hero-line);border-left-color:#fff;background:rgba(10,46,27,.84)}
.demo27-hero-error :is(.ui-state-title,.ui-state-copy){color:#fff}

/* Search: primary homepage action */
.demo27-search-wrap{position:relative;z-index:3;margin-top:-40px}
.demo27-search-panel{position:relative;display:grid;grid-template-columns:minmax(220px,.78fr) minmax(0,1.5fr) auto;grid-template-areas:"head form geo" "head result result" "popular popular popular";align-items:center;gap:var(--space-3) var(--space-4);scroll-margin-top:var(--dbtt-anchor-offset);padding:var(--space-5);border:1px solid var(--border);border-radius:var(--radius-xl);background:var(--surface);box-shadow:var(--shadow-sm)}
.demo27-search-heading{grid-area:head;min-width:0;display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center;gap:var(--space-3)}
.demo27-search-heading-icon{width:44px;height:44px;display:grid;place-items:center;border-radius:var(--radius-md);background:var(--primary-soft);color:var(--primary-dark)}
.demo27-search-heading strong{display:block;color:var(--heading);font-size:16px;line-height:1.25}
.demo27-search-heading small{display:block;margin-top:3px;color:var(--muted);font-size:var(--font-xs);line-height:1.45}
.demo27-search-form{grid-area:form;position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-2)}
.demo27-search-input-wrap{position:relative}
.search-field-icon{position:absolute;left:14px;top:50%;z-index:2;display:grid;width:18px;height:18px;place-items:center;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.demo27-search-input-wrap .ui-search-input{height:var(--control-lg);padding-left:42px;padding-right:48px;border-color:var(--border-strong);background:var(--surface)}
.demo27-search-input-wrap .search-clear{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:var(--touch);height:var(--touch);border:0;background:transparent}
.demo27-search-submit{min-width:108px;min-height:var(--control-lg);white-space:nowrap}
.demo27-search-form .search-results{position:absolute;z-index:30;top:calc(100% + var(--space-2));left:0;right:0;max-height:360px;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
.demo27-search-form .search-option{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--space-3);color:var(--text);text-decoration:none}
.demo27-search-form .search-result-main{min-width:0;display:grid;gap:2px}
.demo27-search-form .search-result-main strong,.demo27-search-form .search-result-main small,.demo27-search-form .search-result-context,.demo27-search-form .search-result-note{min-width:0;max-width:100%;overflow-wrap:anywhere}
.demo27-search-form .search-result-main strong{color:var(--heading);font-size:14px;line-height:1.3}
.demo27-search-form .search-result-main small,.demo27-search-form .search-result-context,.demo27-search-form .search-result-note{color:var(--muted);font-size:var(--font-xs);line-height:1.4}
.demo27-search-form .search-option-arrow{color:var(--primary-dark)}
.demo27-search-form.is-searching .demo27-search-input-wrap::after{content:"";position:absolute;right:52px;top:50%;width:14px;height:14px;margin-top:-7px;border:2px solid var(--primary-line);border-top-color:var(--primary);border-radius:50%;animation:dbtt-home-search-spin .8s linear infinite;pointer-events:none}
@keyframes dbtt-home-search-spin{to{transform:rotate(360deg)}}
.demo27-geo-button{grid-area:geo;min-height:var(--control-lg);white-space:nowrap}
.demo27-geo-button b{margin-left:var(--space-1)}
.demo27-geo-icon{width:20px;height:20px;display:block}
.demo27-geo-result{grid-area:result;justify-self:stretch;max-width:100%;margin:0}
.demo27-geo-result .ui-state-body{display:flex;min-width:0;align-items:center;flex-wrap:wrap;gap:8px 12px}
.demo27-geo-result .ui-state-copy{min-width:min(100%,280px);flex:1 1 280px}
.demo27-geo-result .geo-search-fallback{min-height:var(--touch);flex:0 0 auto}
.demo27-popular{grid-area:popular;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);padding-top:var(--space-1);border-top:1px solid var(--line);color:var(--muted);font-size:var(--font-xs)}
.demo27-popular>span{font-weight:var(--weight-medium);white-space:nowrap}
.demo27-popular>div:not(.location-memory-actions){display:flex;flex-wrap:wrap;gap:var(--space-2)}
.demo27-popular a{min-height:var(--touch);display:inline-flex;align-items:center;padding-inline:var(--space-3);border:1px solid var(--border);border-radius:var(--radius-round);background:var(--surface-soft);color:var(--text-2);font-weight:var(--weight-medium);text-decoration:none}
.demo27-popular a:hover,.demo27-popular a:focus-visible{border-color:var(--primary-line);background:var(--primary-soft);color:var(--primary-dark)}
.demo27-popular .location-memory-actions{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;margin-left:auto;padding:0;border:0}
.demo27-popular .location-memory-actions small{color:var(--muted)}
.legacy-location-anchor{position:absolute;inset:auto auto 100% 0;width:1px;height:1px;overflow:hidden}
.demo27-integrity-state{padding-top:var(--space-3)}
.demo27-integrity-state .ui-state{max-width:none;margin-top:0}

/* Real forecast preview: makes the homepage useful before a second click. */
.demo27-forecast-preview{padding-top:var(--space-8)}
.demo27-forecast-grid{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(340px,.82fr);gap:var(--space-5);align-items:start}
.demo27-forecast-panel{min-width:0;overflow:hidden;border:1px solid var(--border);border-radius:var(--radius-card);background:var(--surface);box-shadow:none}
.demo27-forecast-panel-head{min-height:66px;display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--line);background:var(--surface-soft)}
.demo27-forecast-panel-head>div{min-width:0;display:grid;gap:2px}
.demo27-forecast-panel-head strong{color:var(--heading);font-size:var(--font-ui-title);line-height:1.25}
.demo27-forecast-panel-head small{color:var(--muted);font-size:var(--font-xs);line-height:1.4}
.demo27-forecast-panel-head>a{flex:0 0 auto;color:var(--link);font-size:var(--font-sm);font-weight:var(--weight-medium);text-decoration:underline;text-underline-offset:3px}
.demo27-hourly-rail{display:grid;grid-template-columns:repeat(6,minmax(92px,1fr));min-width:0;overflow-x:auto;scrollbar-width:thin;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch}
.demo27-hour-item{min-width:0;min-height:144px;display:grid;grid-template-rows:auto 42px auto auto;align-content:center;justify-items:center;gap:5px;padding:var(--space-3) var(--space-2);border-right:1px solid var(--line);border-bottom:1px solid var(--line);text-align:center;background:var(--surface)}
.demo27-hour-item:nth-child(6n){border-right:0}
.demo27-hour-item:nth-last-child(-n+6){border-bottom:0}
.demo27-hour-item.is-now{background:var(--primary-soft)}
.demo27-hour-item time{color:var(--muted);font-size:var(--font-xs);font-weight:var(--weight-medium);line-height:1.3;white-space:nowrap}
.demo27-hour-item.is-now time{color:var(--primary-dark);font-weight:var(--weight-bold)}
.demo27-hour-icon,.demo27-hour-weather-svg{width:38px;height:38px;display:block}
.demo27-hour-item>strong{color:var(--heading);font-size:20px;font-variant-numeric:tabular-nums;line-height:1.1}
.demo27-hour-item>small{color:var(--muted);font-size:var(--font-xs);line-height:1.3}
.demo27-daily-list{display:grid}
.demo27-day-row{min-width:0;min-height:64px;display:grid;grid-template-columns:minmax(96px,.72fr) minmax(0,1.45fr) auto;align-items:center;gap:var(--space-3);padding:10px var(--space-4);border-bottom:1px solid var(--line)}
.demo27-day-row:last-child{border-bottom:0}
.demo27-day-name,.demo27-day-condition>span:last-child{min-width:0;display:grid;gap:2px}
.demo27-day-name strong,.demo27-day-condition strong{max-width:100%;color:var(--heading);font-size:var(--font-sm);line-height:1.3;overflow-wrap:anywhere}
.demo27-day-name small,.demo27-day-condition small{max-width:100%;color:var(--muted);font-size:var(--font-xs);line-height:1.3;overflow-wrap:anywhere}
.demo27-day-condition{min-width:0;display:grid;grid-template-columns:34px minmax(0,1fr);align-items:center;gap:var(--space-2)}
.demo27-day-condition>span:first-child,.demo27-day-weather-svg{width:34px;height:34px;display:block}
.demo27-day-temp{display:flex;align-items:baseline;justify-content:flex-end;gap:7px;font-variant-numeric:tabular-nums;white-space:nowrap}
.demo27-day-temp strong{color:var(--heading);font-size:17px}
.demo27-day-temp small{color:var(--muted);font-size:var(--font-sm)}

/* Quick journeys */
.demo27-quick-strip{padding-top:var(--space-7)}
.demo27-quick-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));overflow:hidden;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface)}
.demo27-quick-grid>a{min-width:0;min-height:80px;display:grid;grid-template-columns:40px minmax(0,1fr);align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-right:1px solid var(--line);border-bottom:1px solid var(--line);color:var(--text);text-decoration:none;transition:background-color var(--transition),color var(--transition)}
.demo27-quick-grid>a:nth-child(4n){border-right:0}
.demo27-quick-grid>a:nth-last-child(-n+4){border-bottom:0}
.demo27-quick-grid>a:hover,.demo27-quick-grid>a:focus-visible{background:var(--primary-soft);color:var(--primary-dark)}
.demo27-quick-icon{width:40px;height:40px;display:grid;place-items:center;border-radius:var(--radius-md);background:var(--surface-muted);color:var(--primary-dark)}
.demo27-quick-svg{width:24px;height:24px;display:block}
.demo27-quick-grid>a:hover .demo27-quick-icon,.demo27-quick-grid>a:focus-visible .demo27-quick-icon{background:var(--brand-muted)}
.demo27-quick-grid>a>span:last-child{min-width:0;display:grid;gap:3px}
.demo27-quick-grid strong{color:var(--heading);font-size:14px;line-height:1.3}
.demo27-quick-grid small{color:var(--muted);font-size:var(--font-xs);line-height:1.4;overflow-wrap:anywhere}

/* Shared homepage section composition */
.demo27-section{min-width:0;padding-top:var(--space-10)}
.demo27-section-head>div:first-child{display:flex;align-items:flex-start;gap:var(--space-3);max-width:820px}
.demo27-section-head>div:first-child>span:last-child{min-width:0}
.demo27-section-head h2{text-wrap:balance}
.demo27-section-icon{width:40px;height:40px;flex:0 0 40px;display:grid;place-items:center;border-radius:var(--radius-md);background:var(--primary-soft);color:var(--primary-dark)}
.demo27-section-svg{width:24px;height:24px;display:block}
.demo27-section-head--compact{margin-bottom:var(--space-4)}
.demo27-section-actions{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-3);flex-wrap:wrap}
.demo27-city-retry[hidden]{display:none}
.demo27-city-retry{color:var(--primary-dark)}

/* Five primary metrics */
.demo27-metric-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));overflow:hidden;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface)}
.demo27-metric-card{min-width:0;min-height:150px;display:grid;grid-template-columns:48px minmax(0,1fr);grid-template-rows:auto 1fr;align-content:start;gap:var(--space-3);padding:var(--space-4);border-right:1px solid var(--line);color:var(--text);text-decoration:none;transition:background-color var(--transition)}
.demo27-metric-card:last-child{border-right:0}
.demo27-metric-card:hover,.demo27-metric-card:focus-visible{background:var(--surface-hover)}
.demo27-metric-card-icon{width:48px;height:48px;display:grid;place-items:center;border-radius:var(--radius-md);background:var(--surface-muted);color:var(--primary-dark)}
.demo27-metric-card-svg{width:32px;height:32px;display:block}
.demo27-metric-card-copy{grid-column:1/-1;min-width:0;display:grid;align-content:start;gap:4px}
.demo27-metric-card-copy small{color:var(--muted);font-size:var(--font-xs);line-height:1.3}
.demo27-metric-card-copy strong{max-width:100%;color:var(--heading);font-size:28px;font-variant-numeric:tabular-nums;line-height:1.05;letter-spacing:-.02em;overflow-wrap:anywhere}
.demo27-metric-card-copy em{display:-webkit-box;max-width:100%;overflow:hidden;color:var(--text-2);font-size:var(--font-xs);font-style:normal;line-height:1.45;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow-wrap:anywhere}
.demo27-metric-card>b{position:absolute;visibility:hidden}

/* City snapshots */
.demo27-city-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4)}
.demo27-city-card{position:relative;isolation:isolate;min-width:0;min-height:172px;display:flex;align-items:flex-end;overflow:hidden;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--hero-deep);color:#fff;text-decoration:none;box-shadow:var(--shadow-xs);transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition)}
.demo27-city-card:hover,.demo27-city-card:focus-visible{transform:translateY(-2px);border-color:var(--primary-line);box-shadow:var(--shadow-sm);color:#fff}
.demo27-city-card>img{position:absolute;inset:0;z-index:-3;width:100%;height:100%;object-fit:cover}
.demo27-city-shade{position:absolute;inset:0;z-index:-2;background:rgba(6,30,18,.56)}
.demo27-city-card[data-city-snapshot="ha-noi"]>img{object-position:66% 50%}
.demo27-city-card[data-city-snapshot="ho-chi-minh"]>img{object-position:58% 50%}
.demo27-city-card[data-city-snapshot="da-nang"]>img{object-position:64% 50%}
.demo27-city-copy{width:100%;min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:var(--space-3);padding:var(--space-4)}
.demo27-city-name{min-width:0;max-width:100%;color:#fff;font-size:18px;font-weight:var(--weight-bold);line-height:1.25;overflow-wrap:anywhere}
.demo27-city-weather{display:flex;align-items:center;gap:var(--space-2);justify-self:end}
.demo27-city-weather .city-snapshot-icon-slot{display:grid;width:32px;height:32px;place-items:center}
.demo27-city-weather .city-snapshot-icon-slot svg{display:block;width:32px;height:32px}
.demo27-city-reading{min-width:0;display:grid;justify-items:end;gap:2px;text-align:right}
.demo27-city-reading strong{max-width:100%;color:#fff;font-size:24px;font-variant-numeric:tabular-nums;line-height:1;overflow-wrap:anywhere}
.demo27-city-reading small{display:-webkit-box;max-width:150px;overflow:hidden;color:rgba(255,255,255,.82);font-size:var(--font-xs);line-height:1.3;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow-wrap:anywhere}
.demo27-city-card.city-snapshot.is-loading [data-city-temp],.demo27-city-card.city-snapshot.is-loading [data-city-meta]{color:transparent;border-radius:var(--radius-xs);background:rgba(255,255,255,.2)}
.demo27-city-card.city-snapshot.is-loading [data-city-temp]{min-inline-size:3.4ch}
.demo27-city-card.city-snapshot.is-loading [data-city-meta]{min-inline-size:8ch}
.demo27-city-card.city-snapshot.is-unavailable{border-color:rgba(255,255,255,.28)}
.demo27-city-card.city-snapshot.is-unavailable [data-city-temp]{opacity:.84}

/* Intent / needs */
.demo27-need-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4)}
.demo27-need-card{position:relative;isolation:isolate;min-width:0;min-height:176px;display:flex;align-items:flex-end;overflow:hidden;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--hero-deep);color:#fff;text-decoration:none;transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition)}
.demo27-need-card:hover,.demo27-need-card:focus-visible{transform:translateY(-2px);border-color:var(--primary-line);box-shadow:var(--shadow-sm);color:#fff}
.demo27-need-card>img{position:absolute;inset:0;z-index:-3;width:100%;height:100%;object-fit:cover}
.demo27-need-card:nth-child(1)>img{object-position:center 54%}
.demo27-need-card:nth-child(4)>img{object-position:center 46%}
.demo27-need-card:nth-child(6)>img{object-position:center 44%}
.demo27-need-shade{position:absolute;inset:0;z-index:-2;background:rgba(7,32,19,.58)}
.demo27-need-icon{position:absolute;top:var(--space-4);left:var(--space-4);width:40px;height:40px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.24);border-radius:var(--radius-md);background:rgba(8,39,23,.52);color:#fff}
.demo27-need-svg{width:24px;height:24px;display:block}
.demo27-need-copy{min-width:0;display:grid;gap:3px;padding:var(--space-4)}
.demo27-need-copy strong{max-width:100%;color:#fff;font-size:18px;line-height:1.25;overflow-wrap:anywhere}
.demo27-need-copy small{max-width:100%;color:rgba(255,255,255,.82);font-size:var(--font-xs);line-height:1.4;overflow-wrap:anywhere}

/* News + upcoming events */
.demo27-bottom-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(300px,.72fr);gap:var(--space-8);align-items:start}
.demo27-news-panel,.demo27-events-panel{min-width:0}
.demo27-news-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line)}
.demo27-news-card{min-width:0;border-bottom:1px solid var(--line)}
.demo27-news-card:nth-child(odd){border-right:1px solid var(--line)}
.demo27-news-card a{min-height:112px;display:grid;grid-template-columns:132px minmax(0,1fr);grid-template-rows:auto auto;align-content:center;gap:4px var(--space-3);padding:var(--space-3) var(--space-4);color:var(--text);text-decoration:none;transition:background-color var(--transition)}
.demo27-news-card a:hover,.demo27-news-card a:focus-visible{background:var(--surface-hover)}
.demo27-news-card img{grid-row:1/3;width:132px;height:84px;object-fit:cover;border-radius:var(--radius-md);background:var(--surface-muted)}
.demo27-news-card strong{min-width:0;max-width:100%;align-self:end;color:var(--heading);font-size:15px;line-height:1.35;overflow-wrap:anywhere}
.demo27-news-card small{align-self:start;color:var(--muted);font-size:var(--font-xs);line-height:1.35;overflow-wrap:anywhere}
.demo27-events-panel{padding:var(--space-5);border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface)}
.demo27-event-list{display:grid;border-top:1px solid var(--line)}
.demo27-event-list>a{min-width:0;min-height:64px;display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:var(--space-3);padding:var(--space-3) 0;border-bottom:1px solid var(--line);color:var(--text);text-decoration:none}
.demo27-event-list>a:last-child{border-bottom:0}
.demo27-event-list>a:hover strong,.demo27-event-list>a:focus-visible strong{color:var(--primary-dark);text-decoration:underline;text-underline-offset:3px}
.demo27-event-icon{width:36px;height:36px;display:grid;place-items:center;border-radius:var(--radius-md);background:var(--primary-soft);color:var(--primary-dark)}
.demo27-event-svg{width:20px;height:20px;display:block}
.demo27-event-list>a>span:nth-child(2){min-width:0;display:grid;gap:2px}
.demo27-event-list strong,.demo27-event-list small,.demo27-event-list b{max-width:100%;overflow-wrap:anywhere}
.demo27-event-list strong{color:var(--heading);font-size:14px;line-height:1.3}
.demo27-event-list small{color:var(--muted);font-size:var(--font-xs);line-height:1.3}
.demo27-event-list b{justify-self:end;color:var(--primary-dark);font-size:var(--font-xs);line-height:1.3;white-space:nowrap}

/* All locations */
.demo27-more{padding-top:var(--space-10)}
.demo27-details{overflow:hidden;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface)}
.demo27-details>summary{min-height:72px;padding:var(--space-4) var(--space-5)}
.demo27-details>summary>span{min-width:0;display:grid;gap:3px}
.demo27-details>summary strong{color:var(--heading);font-size:16px;line-height:1.3}
.demo27-details>summary small{color:var(--muted);font-size:var(--font-xs);line-height:1.4}
.demo27-details[open]>summary{border-bottom:1px solid var(--line);background:var(--surface-soft)}
.demo27-region-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-7);padding:var(--space-6)}
.demo27-region-grid section{min-width:0}
.demo27-region-grid h3{margin:0 0 var(--space-3);color:var(--heading);font-size:16px}
.demo27-region-grid section>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px var(--space-4)}
.demo27-region-grid a{min-height:40px;display:flex;align-items:center;color:var(--text-2);font-size:13px;text-decoration:none;overflow-wrap:anywhere}
.demo27-region-grid a:hover,.demo27-region-grid a:focus-visible{color:var(--primary-dark);text-decoration:underline;text-underline-offset:3px}

@media(max-width:1100px){
  .demo27-hero-inner{grid-template-columns:minmax(0,1.35fr) minmax(260px,.72fr);gap:var(--space-7)}
  .demo27-bottom-grid{grid-template-columns:1fr}
  .demo27-events-panel{padding:0;border:0;background:transparent}
  .demo27-event-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .demo27-event-list>a:nth-child(odd){padding-right:var(--space-4);border-right:1px solid var(--line)}
  .demo27-event-list>a:nth-child(even){padding-left:var(--space-4)}
}

@media(max-width:900px){
  .demo27-forecast-grid{grid-template-columns:1fr}
  .demo27-hero-inner{grid-template-columns:1fr;min-height:0;padding-block:var(--space-8) 72px}
  .demo27-current{max-width:none}
  .demo27-hero-actions{max-width:680px}
  .demo27-search-panel{grid-template-columns:minmax(200px,.72fr) minmax(0,1.28fr);grid-template-areas:"head form" "geo result" "popular popular"}
  .demo27-geo-button{justify-self:start}
  .demo27-popular .location-memory-actions{margin-left:0}
  .demo27-metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .demo27-metric-card{min-height:132px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
  .demo27-metric-card:nth-child(2n){border-right:0}
  .demo27-metric-card:nth-child(5){grid-column:1/-1;min-height:112px;border-right:0;border-bottom:0}
  .demo27-city-grid,.demo27-need-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .demo27-region-grid{grid-template-columns:1fr 1fr}
}

@media(max-width:700px){
  .demo27-forecast-preview{padding-top:var(--space-7)}
  .demo27-hourly-rail{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(100px,1fr)}
  .demo27-hour-item,.demo27-hour-item:nth-child(6n),.demo27-hour-item:nth-last-child(-n+6){border-right:1px solid var(--line);border-bottom:0}
  .demo27-hour-item:last-child{border-right:0}
  .demo27-home{padding-bottom:var(--space-9)}
  .demo27-hero-bg{background-position:62% 50%}
  .demo27-hero-shade{background:rgba(9,42,25,.88)}
  .demo27-hero-inner{gap:var(--space-5);padding-block:var(--space-6) 66px}
  .demo27-current h1{font-size:clamp(36px,9vw,46px)}
  .demo27-condition-row{grid-template-columns:56px auto;gap:var(--space-3)}
  .demo27-weather-icon,.demo27-weather-svg{width:56px;height:56px}
  .demo27-condition-copy{grid-column:1/-1}
  .demo27-condition-copy b{font-size:19px}
  .demo27-hero-actions{padding:var(--space-4)}
  .demo27-search-wrap{margin-top:-34px}
  .demo27-search-panel{grid-template-columns:1fr;grid-template-areas:"head" "form" "geo" "result" "popular";gap:var(--space-3);padding:var(--space-4)}
  .demo27-search-heading{grid-template-columns:40px minmax(0,1fr)}
  .demo27-search-heading-icon{width:40px;height:40px}
  .demo27-search-form{grid-template-columns:1fr}
  .demo27-search-submit,.demo27-geo-button{width:100%}
  .demo27-search-form .search-results{position:relative;top:auto;grid-column:1/-1;margin-top:var(--space-2);max-height:var(--dbtt-search-results-max-height,320px)}
  .demo27-popular{align-items:flex-start;flex-direction:column}
  .demo27-popular>div:not(.location-memory-actions){width:100%}
  .demo27-quick-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .demo27-quick-grid>a:nth-child(4n){border-right:1px solid var(--line)}
  .demo27-quick-grid>a:nth-child(2n){border-right:0}
  .demo27-quick-grid>a:nth-last-child(-n+4){border-bottom:1px solid var(--line)}
  .demo27-quick-grid>a:nth-last-child(-n+2){border-bottom:0}
  .demo27-section{padding-top:var(--space-9)}
  .demo27-section-head>div:first-child{gap:var(--space-2)}
  .demo27-section-actions{width:100%;justify-content:flex-start}
  .demo27-metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .demo27-metric-card:nth-child(5){grid-column:1/-1}
  .demo27-city-card,.demo27-need-card{min-height:160px}
  .demo27-news-grid{grid-template-columns:1fr}
  .demo27-news-card:nth-child(odd){border-right:0}
  .demo27-event-list{grid-template-columns:1fr}
  .demo27-event-list>a:nth-child(odd),.demo27-event-list>a:nth-child(even){padding-inline:0;border-right:0}
  .demo27-region-grid{grid-template-columns:1fr;gap:var(--space-5)}
}

@media(max-width:430px){
  .demo27-forecast-panel-head{min-height:60px;padding-inline:var(--space-3)}
  .demo27-forecast-panel-head small{display:none}
  .demo27-day-row{grid-template-columns:minmax(84px,.72fr) minmax(0,1fr) auto;gap:var(--space-2);padding-inline:var(--space-3)}
  .demo27-day-condition>span:first-child{display:none}
  .demo27-day-condition{grid-template-columns:1fr}
  .demo27-current-context{font-size:var(--font-xs)}
  .demo27-current h1{font-size:34px}
  .demo27-temp{font-size:54px}
  .demo27-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .demo27-metric{min-height:76px;padding:var(--space-3);border-right:1px solid var(--hero-line);border-bottom:1px solid var(--hero-line)}
  .demo27-metric:nth-child(3n){border-right:1px solid var(--hero-line)}
  .demo27-metric:nth-child(2n){border-right:0}
  .demo27-metric:nth-last-child(-n+3){border-bottom:1px solid var(--hero-line)}
  .demo27-metric:nth-last-child(-n+2){border-bottom:0}
  .demo27-place-pill{grid-template-columns:38px minmax(0,1fr) auto}
  .demo27-place-icon-wrap{width:38px;height:38px}
  .demo27-search-panel{padding:var(--space-3)}
  .demo27-search-heading small{font-size:var(--font-xs)}
  .demo27-search-input-wrap .ui-search-input{font-size:16px}
  .demo27-search-form .search-results{max-height:var(--dbtt-search-results-max-height,280px)}
  .demo27-search-form .search-option{min-height:52px;padding-block:10px}
  .demo27-geo-result .ui-state-body{align-items:flex-start}
  .demo27-geo-result .geo-search-fallback{width:100%;justify-content:flex-start}
  .demo27-quick-grid{grid-template-columns:1fr}
  .demo27-quick-grid>a,.demo27-quick-grid>a:nth-child(2n),.demo27-quick-grid>a:nth-child(4n),.demo27-quick-grid>a:nth-last-child(-n+2),.demo27-quick-grid>a:nth-last-child(-n+4){min-height:72px;border-right:0;border-bottom:1px solid var(--line)}
  .demo27-quick-grid>a:last-child{border-bottom:0}
  .demo27-metric-grid{grid-template-columns:1fr}
  .demo27-metric-card,.demo27-metric-card:nth-child(2n),.demo27-metric-card:nth-child(5){grid-column:auto;min-height:0;grid-template-columns:44px minmax(0,1fr);grid-template-rows:auto;align-items:center;gap:var(--space-3);padding:var(--space-3);border-right:0;border-bottom:1px solid var(--line)}
  .demo27-metric-card:last-child{border-bottom:0}
  .demo27-metric-card-icon{width:44px;height:44px}
  .demo27-metric-card-svg{width:30px;height:30px}
  .demo27-metric-card-copy{grid-column:auto}
  .demo27-metric-card-copy strong{font-size:22px}
  .demo27-city-grid,.demo27-need-grid{grid-template-columns:1fr}
  .demo27-city-card,.demo27-need-card{min-height:150px}
  .demo27-city-copy{grid-template-columns:minmax(0,1fr) auto;padding:var(--space-3)}
  .demo27-city-name{font-size:17px}
  .demo27-need-icon{top:var(--space-3);left:var(--space-3)}
  .demo27-need-copy{padding:var(--space-3)}
  .demo27-news-card a{grid-template-columns:108px minmax(0,1fr);min-height:100px;padding-inline:0}
  .demo27-news-card img{width:108px;height:76px}
  .demo27-events-panel{padding:0}
  .demo27-event-list>a{grid-template-columns:36px minmax(0,1fr);min-height:64px}
  .demo27-event-list b{grid-column:2;justify-self:start;white-space:normal}
  .demo27-details>summary{padding-inline:var(--space-4)}
  .demo27-region-grid{padding:var(--space-4)}
  .demo27-region-grid section>div{grid-template-columns:1fr}
}

@media(max-width:360px){
  .demo27-current h1{font-size:32px}
  .demo27-search-heading{grid-template-columns:1fr}
  .demo27-search-heading-icon{display:none}
  .demo27-section-icon{width:36px;height:36px;flex-basis:36px}
  .demo27-section-svg{width:22px;height:22px}
  .demo27-news-card a{grid-template-columns:94px minmax(0,1fr)}
  .demo27-news-card img{width:94px;height:70px}
}

@media(prefers-reduced-motion:reduce){
  .demo27-city-card,.demo27-need-card{transition:none}
  .demo27-search-form.is-searching .demo27-search-input-wrap::after{animation:none}
}