/* Home page (front-page.php). Everything is scoped under .home-page. */

/* ---------- Hero ---------- */
.home-page .hp-hero { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 760px; overflow: hidden; background: var(--ui-night); color: #fff; }
.home-page .hp-hero__media, .home-page .hp-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.home-page .hp-hero__media img { object-fit: cover; display: block; }
.home-page .hp-hero__shade { position: absolute; inset: 0; background: rgba(14, 22, 48, .55); }
.home-page .hp-hero__inner { position: relative; display: flex; flex-direction: column; gap: 32px; padding-top: 150px; padding-bottom: 48px; }
.home-page .hp-hero__copy { display: flex; flex-direction: column; gap: 20px; max-width: 920px; }
.home-page .hp-hero__kicker { display: inline-flex; align-items: center; gap: 8px; width: max-content; max-width: 100%; padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .25); font-size: 13px; font-weight: 600; }
.home-page .hp-hero__kicker > span { width: 8px; height: 8px; border-radius: 999px; background: #7FD8FF; }
.home-page .hp-hero h1 { color: #fff; }
.home-page .hp-hero__lead { margin: 0; max-width: 640px; font-size: 19px; line-height: 1.5; color: rgba(255, 255, 255, .86); }

/* Search form (keeps .search-panel for analytics; legacy layout reset here) */
.home-page .home-search.search-panel { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; width: auto; margin: 0; padding: 10px; background: #fff; border: 0; border-radius: var(--ui-radius); box-shadow: 0 24px 60px rgba(0, 0, 0, .25); color: var(--ui-ink); }
.home-page .home-search .ui-field { position: relative; flex: 1 1 160px; justify-content: center; }
.home-page .home-search__query { flex: 2 1 280px; }
.home-page .home-search__query > label { font-size: 12px; font-weight: 600; color: var(--ui-muted); }
.home-page .home-search .ui-field input, .home-page .home-search .ui-field select { width: 100%; min-height: 26px; }
.home-page .home-search__select select { padding-right: 22px; cursor: pointer; }
.home-page .home-search__select::after { content: ""; position: absolute; right: 18px; bottom: 22px; width: 7px; height: 7px; border-right: 2px solid var(--ui-muted); border-bottom: 2px solid var(--ui-muted); transform: rotate(45deg); pointer-events: none; }
.home-page .home-search__submit { flex: 0 0 auto; min-width: 160px; min-height: 64px; border-radius: var(--ui-radius-sm); font-size: 16px; }
.home-page .home-search__submit svg { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.home-page .home-search .search-suggestions { top: calc(100% + 14px); left: -10px; }

.home-page .hp-hero__quick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.home-page .hp-hero__quick > span { margin-right: 4px; font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, .75); }
.home-page .hp-hero__quick a { padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .35); color: #fff; font-size: 13px; font-weight: 600; text-decoration: none; }
.home-page .hp-hero__quick a:hover { background: rgba(255, 255, 255, .14); color: #fff; }

.home-page .hp-hero__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 16px; margin: 0; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, .22); }
.home-page .hp-hero__stats > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 4px; }
.home-page .hp-hero__stats dd { margin: 0; font-size: 36px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.home-page .hp-hero__stats dt { font-size: 14px; color: rgba(255, 255, 255, .78); }

/* ---------- Purchase goals ---------- */
.home-page .home-goal { display: flex; flex-direction: column; gap: 28px; min-height: 220px; box-sizing: border-box; text-decoration: none; color: var(--ui-ink); }
.home-page .home-goal.ui-card--accent { color: #fff; }
.home-page .home-goal:hover { color: inherit; }
.home-page .home-goal.ui-card--accent:hover { color: #fff; background: var(--ui-accent-hover); }
.home-page .home-goal .atlas-icon, .home-page .home-benefit .atlas-icon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.home-page .home-goal__text { display: flex; flex-direction: column; gap: 8px; margin-top: auto; }
.home-page .home-goal__text .ui-h3 { font-size: 24px; }
.home-page .home-goal__text .ui-muted { font-size: 15px; line-height: 1.5; }

/* ---------- Developers ---------- */
.home-page .home-areas__grid, .home-page .home-developers__grid { grid-template-columns: repeat(auto-fill, minmax(min(380px, 100%), 1fr)); }
.home-page .ui-section__head .ui-btn .atlas-icon { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.home-page .home-developer { display: flex; flex-direction: column; gap: 20px; padding: 24px; text-decoration: none; color: var(--ui-ink); }
.home-page .home-developer:hover { color: var(--ui-ink); }
.home-page .home-developer__head { display: flex; align-items: center; gap: 14px; }
.home-page .home-developer__logo { display: inline-flex; flex: 0 0 auto; width: 56px; height: 56px; align-items: center; justify-content: center; overflow: hidden; border-radius: var(--ui-radius-sm); background: var(--ui-ground); border: 1px solid var(--ui-line-soft); }
.home-page .home-developer__logo img { max-width: 44px; max-height: 44px; width: auto; height: auto; object-fit: contain; }
.home-page .home-developer__logo .developer-logo__fallback { font-size: 15px; font-weight: 800; color: var(--ui-accent); }
.home-page .home-developer__head strong { flex: 1 1 auto; min-width: 0; font-size: 21px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
.home-page .home-developer__count { flex: 0 0 auto; padding: 6px 12px; border-radius: 999px; background: var(--ui-tint); color: var(--ui-accent-deep); font-size: 13px; font-weight: 700; white-space: nowrap; }
.home-page .home-developer__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding-top: 16px; border-top: 1px solid var(--ui-line-soft); }
.home-page .home-developer__facts > span { display: flex; flex-direction: column; gap: 2px; }
.home-page .home-developer__facts small { font-size: 12px; color: var(--ui-muted); }
.home-page .home-developer__facts b { font-size: 15px; font-weight: 700; }

/* ---------- Newest projects ---------- */
.home-page .home-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 16px; }

/* ---------- Editorial picks ---------- */
.home-page .home-picks__note { margin: 0; max-width: 420px; font-size: 15px; line-height: 1.5; color: var(--ui-muted); }
.home-page .home-picks__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(200px, auto); gap: 16px; }
.home-page .home-pick { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 200px; overflow: hidden; border-radius: 32px; background: var(--ui-night); color: #fff; box-shadow: var(--ui-shadow); }
.home-page .home-pick--big { grid-column: span 2; grid-row: span 3; min-height: 520px; }
.home-page .home-pick__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.home-page .home-pick::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 22, 48, .1) 25%, rgba(14, 22, 48, .85) 100%); pointer-events: none; }
.home-page .home-pick__badge { position: absolute; z-index: 2; left: 20px; top: 20px; padding: 7px 12px; border-radius: 999px; background: #fff; color: var(--ui-ink); font-size: 12px; font-weight: 700; }
.home-page .home-pick__save { z-index: 3; right: 16px; top: 16px; display: inline-flex; align-items: center; justify-content: center; }
.home-page .home-pick__save .atlas-icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.home-page .home-pick__save[aria-pressed="true"] .atlas-icon { fill: var(--ui-accent); stroke: var(--ui-accent); }
.home-page .home-pick__body { display: flex; flex-direction: column; gap: 6px; padding: 24px; }
.home-page .home-pick--big .home-pick__body { gap: 10px; padding: 32px; max-width: 560px; }
.home-page .home-pick__sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, .82); }
.home-page .home-pick h3 { margin: 0; font-size: 24px; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; }
.home-page .home-pick--big h3 { font-size: clamp(30px, 3vw, 40px); }
.home-page .home-pick h3 a { color: #fff; text-decoration: none; }
.home-page .home-pick h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.home-page .home-pick { isolation: isolate; }
.home-page .home-pick__image { z-index: -2; }
.home-page .home-pick::after { z-index: -1; }
.home-page .home-pick__body { position: static; }
.home-page .home-pick__meta { font-size: 15px; font-weight: 700; }
.home-page .home-pick--big .home-pick__meta { font-size: 20px; }

/* ---------- Panels (budget, steps) ---------- */
.home-page .home-panel { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); gap: 48px; padding: 40px; border-radius: 32px; background: var(--ui-panel); border: 1px solid var(--ui-line); box-sizing: border-box; }
.home-page .home-panel__intro { display: flex; flex-direction: column; gap: 18px; }
.home-page .home-panel__intro p { margin: 0; max-width: 440px; font-size: 16px; line-height: 1.55; }
.home-page .home-panel__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.home-page .home-budget__list, .home-page .home-steps__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.home-page .home-budget__list a { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--ui-line-soft); color: var(--ui-ink); text-decoration: none; }
.home-page .home-budget__list li:last-child a { border-bottom: 0; }
.home-page .home-budget__list a:hover strong { color: var(--ui-accent); }
.home-page .home-budget__index { font-size: 14px; font-weight: 700; color: var(--ui-muted); }
.home-page .home-budget__name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.home-page .home-budget__name strong { font-size: 17px; font-weight: 700; }
.home-page .home-budget__name small { font-size: 13px; color: var(--ui-muted); }
.home-page .home-budget__price { font-size: 17px; font-weight: 800; white-space: nowrap; }
.home-page .home-steps__list li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--ui-line-soft); }
.home-page .home-steps__list li:last-child { border-bottom: 0; }
.home-page .home-steps__num { display: inline-flex; width: 56px; height: 56px; align-items: center; justify-content: center; border-radius: 999px; background: var(--ui-accent); color: #fff; font-size: 18px; font-weight: 800; }
.home-page .home-steps__list li > span:last-child { display: flex; flex-direction: column; gap: 6px; }
.home-page .home-steps__list strong { font-size: 19px; font-weight: 800; }
.home-page .home-steps__list .ui-muted { font-size: 15px; line-height: 1.55; }

/* ---------- Areas ---------- */
.home-page .home-area { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 300px; padding: 22px; overflow: hidden; border-radius: var(--ui-radius); background: var(--ui-night); color: #fff; text-decoration: none; box-shadow: var(--ui-shadow); box-sizing: border-box; }
.home-page .home-area:hover { color: #fff; box-shadow: var(--ui-shadow-hover); }
.home-page .home-area__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.home-page .home-area:hover .home-area__image { transform: scale(1.03); }
.home-page .home-area::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 22, 48, .08) 30%, rgba(14, 22, 48, .85) 100%); }
.home-page .home-area__count { position: absolute; z-index: 2; right: 16px; top: 16px; padding: 6px 10px; border-radius: 999px; background: rgba(255, 255, 255, .94); color: var(--ui-ink); font-size: 12px; font-weight: 700; }
.home-page .home-area__body { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 4px; }
.home-page .home-area__body strong { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; }
.home-page .home-area__body span { font-size: 14px; color: rgba(255, 255, 255, .86); }

/* ---------- Benefits ---------- */
.home-page .home-benefit { display: flex; flex-direction: column; gap: 14px; padding: 26px; }
.home-page .home-benefit .ui-icon-tile { width: 44px; height: 44px; border-radius: 12px; }
.home-page .home-benefit h3 { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -0.01em; }
.home-page .home-benefit p { margin: 0; font-size: 15px; line-height: 1.55; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .home-page .home-picks__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-page .home-pick--big { grid-column: 1 / -1; grid-row: auto; min-height: 420px; }
}
@media (max-width: 960px) {
  .home-page .hp-hero { min-height: 0; }
  .home-page .hp-hero__inner { padding-top: 112px; padding-bottom: 40px; gap: 24px; }
  .home-page .hp-hero__lead { font-size: 17px; }
  .home-page .home-panel { padding: 28px 22px; gap: 28px; }
}
@media (max-width: 640px) {
  .home-page .hp-hero h1 { font-size: 36px; }
  .home-page .home-search__select { flex: 1 1 calc(50% - 4px); }
  .home-page .home-search__select:nth-of-type(3) { display: none; }
  .home-page .home-search__submit { flex: 1 1 100%; min-height: 54px; }
  .home-page .hp-hero__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 20px; }
  .home-page .hp-hero__stats dd { font-size: 28px; }
  .home-page .home-picks__grid { grid-template-columns: 1fr; }
  .home-page .home-pick, .home-page .home-pick--big { min-height: 300px; border-radius: var(--ui-radius); }
  .home-page .home-pick--big .home-pick__body { padding: 22px; }
  .home-page .home-area { min-height: 240px; }
  .home-page .home-budget__list a { grid-template-columns: 28px minmax(0, 1fr); }
  .home-page .home-budget__price { grid-column: 2; font-size: 15px; }
  .home-page .home-steps__list li { grid-template-columns: 44px minmax(0, 1fr); gap: 14px; }
  .home-page .home-steps__num { width: 44px; height: 44px; font-size: 16px; }
}