/* ============================================================
   DailyDesk — Homepage (tool dashboard)
   home.css — hub-specific styles. Reuses the design tokens +
   chrome (header/footer) from styles.css. Layout = a "Top tools"
   featured band (3 flagships with live previews) + one unified
   "All tools" grid + a "Coming soon" grid. Each tile carries its
   tool's category accent via a .home-tile--{cat} modifier.
   ============================================================ */

/* ── Intro ── */
.home-intro { padding: 30px 0 16px; }
.home-intro-title { font-size: clamp(1.9rem, 4vw, 2.7rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; margin-bottom: 8px; }
.home-intro-sub { font-size: 1.05rem; color: var(--color-muted); max-width: 60ch; }

.home-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.home-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: var(--color-card); font-size: 0.8rem; font-weight: 500; color: var(--color-muted); }
.home-badge svg { width: 14px; height: 14px; color: var(--color-text); flex-shrink: 0; }

/* ── Category section ── */
.home-cat { margin-top: 30px; }
.home-cat-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; padding-bottom: 8px; border-bottom: 1px solid var(--color-border); }
.home-cat-title { font-size: 0.95rem; font-weight: 700; letter-spacing: -0.01em; }
.home-cat-title .count { color: var(--color-light); font-weight: 600; margin-left: 6px; font-size: 0.85rem; }
.home-cat-all { font-size: 0.82rem; font-weight: 600; color: var(--color-muted); white-space: nowrap; }
.home-cat-all:hover { color: var(--color-text); }

/* ── Tiles ── */
.home-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.home-tile { display: flex; flex-direction: column; align-items: flex-start; padding: 20px; background: var(--color-card); border: 1px solid var(--color-border); border-radius: 16px; box-shadow: var(--shadow-card); color: var(--color-text); }
a.home-tile { transition: transform .15s, box-shadow .15s, border-color .15s; }
a.home-tile:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0,0,0,.08); border-color: var(--color-border-hover); }
a.home-tile:focus-visible { outline: 3px solid rgba(0,0,0,.25); outline-offset: 2px; }
.home-tile-ic { width: 44px; height: 44px; border-radius: 12px; background: var(--color-bg); border: 1px solid var(--color-border); display: inline-flex; align-items: center; justify-content: center; color: var(--color-text); margin-bottom: 12px; }
.home-tile-ic svg { width: 22px; height: 22px; }
.home-tile h3 { font-size: 1.04rem; font-weight: 700; letter-spacing: -0.01em; }
.home-tile p { font-size: 0.87rem; color: var(--color-muted); margin-top: 5px; }
.home-tile .cta { margin-top: auto; padding-top: 12px; font-size: 0.82rem; font-weight: 700; }
a.home-tile:hover .cta { text-decoration: underline; }

/* Mini "day across cities" preview bars on the planner tile */
.home-mini { display: flex; gap: 3px; margin-top: 12px; width: 100%; }
.home-mini i { flex: 1; height: 20px; border-radius: 3px; }
.bm-n { background: var(--tl-night); }
.bm-m { background: var(--tl-morning); }
.bm-w { background: var(--tl-work); }
.bm-e { background: var(--tl-evening); }

/* Coming-soon tiles (not links) */
.home-tile--soon { cursor: default; }
.home-tile--soon:hover { transform: none; box-shadow: var(--shadow-card); border-color: var(--color-border); }
.home-tile--soon .home-tile-ic, .home-tile--soon h3 { color: var(--color-light); }
.home-soon-tag { margin-top: auto; padding-top: 12px; font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-light); }

/* ── Per-tile colour: tint each live tile's icon badge + CTA arrow with its
   tool's category accent, so every tool keeps its own colour in the unified
   "All tools" grid (coming-soon tiles stay muted grey). ── */
a.home-tile--time     .home-tile-ic { background: var(--accent-time-bg);     border-color: var(--accent-time-bd);     color: var(--accent-time); }
a.home-tile--images   .home-tile-ic { background: var(--accent-images-bg);   border-color: var(--accent-images-bd);   color: var(--accent-images); }
a.home-tile--health   .home-tile-ic { background: var(--accent-health-bg);   border-color: var(--accent-health-bd);   color: var(--accent-health); }
a.home-tile--finance  .home-tile-ic { background: var(--accent-finance-bg);  border-color: var(--accent-finance-bd);  color: var(--accent-finance); }
a.home-tile--everyday .home-tile-ic { background: var(--accent-everyday-bg); border-color: var(--accent-everyday-bd); color: var(--accent-everyday); }

a.home-tile--time     .cta { color: var(--accent-time); }
a.home-tile--images   .cta { color: var(--accent-images); }
a.home-tile--health   .cta { color: var(--accent-health); }
a.home-tile--finance  .cta { color: var(--accent-finance); }
a.home-tile--everyday .cta { color: var(--accent-everyday); }

@media (prefers-reduced-motion: reduce) { a.home-tile:hover { transform: none; } }
@media (max-width: 560px) { .home-tiles { grid-template-columns: 1fr; } }

/* ── Featured band: the three flagship tools, larger and up top ── */
.home-featured { margin-top: 22px; }
.home-featured-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; padding-bottom: 8px; border-bottom: 1px solid var(--color-border); }
.home-featured-head .home-cat-title { display: inline-flex; align-items: center; gap: 7px; }
.home-featured-star { width: 15px; height: 15px; color: var(--accent-everyday); }
.home-featured-sub { font-size: 0.82rem; color: var(--color-light); }

.home-featured-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }

/* Larger sibling of .home-tile */
.home-feature { display: flex; flex-direction: column; align-items: flex-start; padding: 26px; background: var(--color-card); border: 1px solid var(--color-border); border-radius: 18px; box-shadow: var(--shadow-card); color: var(--color-text); transition: transform .15s, box-shadow .15s, border-color .15s; }
.home-feature:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0,0,0,.08); border-color: var(--color-border-hover); }
.home-feature:focus-visible { outline: 3px solid rgba(0,0,0,.25); outline-offset: 2px; }
.home-feature-ic { width: 58px; height: 58px; border-radius: 15px; background: var(--color-bg); border: 1px solid var(--color-border); display: inline-flex; align-items: center; justify-content: center; color: var(--color-text); margin-bottom: 16px; }
.home-feature-ic svg { width: 29px; height: 29px; }
.home-feature h3 { font-size: 1.24rem; font-weight: 700; letter-spacing: -0.01em; }
.home-feature p { font-size: 0.93rem; color: var(--color-muted); margin-top: 7px; }
.home-feature .cta { margin-top: auto; padding-top: 16px; font-size: 0.86rem; font-weight: 700; }
.home-feature:hover .cta { text-decoration: underline; }

/* Preview block sits between the copy and the CTA */
.home-feature-preview { width: 100%; margin-top: 16px; }
.home-mini.home-feature-preview i { height: 26px; }

/* Square-footage mini floor plan (height follows width via the viewBox ratio,
   so it never distorts) */
.feature-fp svg { width: 100%; height: auto; display: block; }
.feature-fp-grid path { stroke: var(--accent-everyday-bd); stroke-width: 0.8; fill: none; }
.feature-fp-room { fill: var(--accent-everyday-bg); stroke: var(--accent-everyday); stroke-width: 2.2; stroke-linejoin: round; }
.feature-fp-area { fill: var(--accent-everyday); font-size: 13px; font-weight: 700; }

/* Image compressor before → after */
.feature-img-stat { display: flex; align-items: center; gap: 7px; font-size: 0.74rem; color: var(--color-muted); }
.feature-img-before { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 5px; padding: 2px 7px; }
.feature-img-arrow { color: var(--accent-images); font-weight: 700; }
.feature-img-after { background: var(--accent-images-bg); border: 1px solid var(--accent-images-bd); color: var(--accent-images); border-radius: 5px; padding: 2px 7px; font-weight: 600; }
.feature-img-pct { margin-left: auto; color: var(--accent-images); font-weight: 700; }
.feature-img-bar { display: block; height: 6px; border-radius: 3px; background: var(--color-bg); border: 1px solid var(--color-border); margin-top: 9px; overflow: hidden; }
.feature-img-bar i { display: block; width: 9%; height: 100%; background: var(--accent-images); }

/* Accent tinting per flagship (mirrors the .home-cat--* tile rules above) */
.feature--time     .home-feature-ic { background: var(--accent-time-bg);     border-color: var(--accent-time-bd);     color: var(--accent-time); }
.feature--images   .home-feature-ic { background: var(--accent-images-bg);   border-color: var(--accent-images-bd);   color: var(--accent-images); }
.feature--everyday .home-feature-ic { background: var(--accent-everyday-bg); border-color: var(--accent-everyday-bd); color: var(--accent-everyday); }
.feature--time     .cta { color: var(--accent-time); }
.feature--images   .cta { color: var(--accent-images); }
.feature--everyday .cta { color: var(--accent-everyday); }

@media (prefers-reduced-motion: reduce) { .home-feature:hover { transform: none; } }
@media (max-width: 820px) { .home-featured-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } }
@media (max-width: 560px) { .home-featured-grid { grid-template-columns: 1fr; } }