/* ============================================================
   HOME — Nomads Anywhere
   Loaded only on the home page (default.hbs, {{#is "home"}}).

   Everything here is prefixed `hm-`. The components the home page shares with the city
   page — .stats-strip, .wifi-badge, .location-result, .check-stay-button — are styled in
   screen.css and are deliberately not redefined here: the two pages must not drift.
   ============================================================ */

.home-template {
   background: var(--na-bg);
   color: var(--na-ink);
   font-family: var(--na-font-ui);
   -webkit-font-smoothing: antialiased;
}

.hm-w {
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 28px;
}

.hm-eyebrow,
.hm-sub,
.hm-h1,
.hm-h2,
.hm-step p,
.hm-nl p {
   margin: 0;
}

.hm-eyebrow {
   font-size: 12px;
   font-weight: 500;
   letter-spacing: 0.3px;
   text-transform: uppercase;
   color: var(--na-ink-3);
}

.hm-h1 {
   margin-top: 8px;
   font-family: var(--na-font-editorial);
   font-size: 48px;
   line-height: 1.05;
   letter-spacing: -1.2px;
   font-weight: 500;
   text-wrap: balance;
}
.hm-h1 em { font-style: italic; font-weight: 400; }

.hm-h2 {
   font-family: var(--na-font-editorial);
   font-size: 30px;
   line-height: 1.1;
   letter-spacing: -0.7px;
   font-weight: 500;
}

.hm-sub {
   color: var(--na-ink-2);
   font-size: 15px;
   line-height: 1.55;
   text-wrap: pretty;
}

.hm-link {
   font-weight: 500;
   color: var(--na-ink);
   border-bottom: 1px solid var(--na-line);
   padding-bottom: 1px;
}
.hm-link:hover { color: var(--na-accent-ink); }

.hm-btn {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   height: 42px;
   padding: 0 18px;
   border-radius: 999px;
   border: 1px solid var(--na-ink);
   background: var(--na-ink);
   color: #fff;
   font-family: var(--na-font-ui);
   font-size: 13.5px;
   font-weight: 600;
   line-height: 1;
   letter-spacing: -0.1px;
   white-space: nowrap;
   cursor: pointer;
}
.hm-btn:hover {
   background: var(--na-accent-ink);
   border-color: var(--na-accent-ink);
   color: #fff;
}
.hm-btn.hm-btn-quiet {
   background: #fff;
   color: var(--na-ink);
   border-color: var(--na-line);
}
.hm-btn.hm-btn-quiet:hover {
   background: var(--na-line-2);
   border-color: var(--na-ink-3);
   color: var(--na-ink);
}

/* ---------- hero ---------- */

.hm-hero {
   padding: 40px 0 36px;
   background: #fff;
   border-bottom: 1px solid var(--na-line);
}
.hm-hero-grid {
   display: grid;
   grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
   gap: 40px;
   align-items: center;
}
.hm-hero .hm-sub {
   margin-top: 14px;
   max-width: 56ch;
   font-size: 16px;
}

.hm-search {
   display: flex;
   align-items: center;
   gap: 10px;
   width: 100%;
   max-width: 520px;
   margin-top: 22px;
   height: 52px;
   padding: 0 6px 0 16px;
   border-radius: 999px;
   border: 1px solid var(--na-line);
   background: #fff;
   box-shadow: var(--na-shadow);
   font-family: var(--na-font-ui);
   font-size: 15px;
   color: var(--na-ink-3);
   text-align: left;
   cursor: pointer;
}
.hm-search:hover { border-color: var(--na-ink-3); }
.hm-search svg { flex-shrink: 0; }
.hm-search-text { flex: 1; min-width: 0; }
.hm-search-go {
   display: inline-flex;
   align-items: center;
   height: 40px;
   padding: 0 18px;
   border-radius: 999px;
   background: var(--na-ink);
   color: #fff;
   font-size: 13.5px;
   font-weight: 600;
}

.hm-hero-meta {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 14px;
   margin: 14px 0 0;
   font-size: 13px;
   color: var(--na-ink-3);
}

.hm-hero .stats-strip { margin-top: 22px; }

/* ---------- detector figure ---------- */

.hm-figure { margin: 0; }
.hm-det {
   position: relative;
   aspect-ratio: 4 / 3;
   border-radius: 20px;
   overflow: hidden;
   background: #222;
   border: 1px solid var(--na-line);
   box-shadow: var(--na-shadow);
}
.hm-det img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
}
.hm-box {
   position: absolute;
   border: 1.5px solid rgba(255, 255, 255, .9);
   border-radius: 4px;
}
.hm-box span {
   position: absolute;
   left: -1.5px;
   top: -1px;
   transform: translateY(-100%);
   background: #fff;
   color: var(--na-ink);
   font-family: ui-monospace, Menlo, monospace;
   font-size: 10px;
   font-weight: 600;
   padding: 2px 5px;
   border-radius: 2px 2px 2px 0;
   white-space: nowrap;
}
/* The boxes are positioned against the 4:3 crop of office_chair.jpg (1196x1267, so the crop is
   vertical and constant). Changing .hm-det's aspect ratio moves the crop and the boxes stop
   sitting on the furniture — which is why it does not change at any breakpoint. */
.hm-box-chair {
   left: 17%; top: 2%; width: 48%; height: 89%;
   border-color: var(--na-accent);
   box-shadow: 0 0 0 1px rgba(255, 255, 255, .4) inset, 0 0 24px rgba(124, 77, 255, .35);
}
/* The chair reaches the top of the crop, so its label sits inside the box — above it would be
   clipped by the figure. */
.hm-box-chair span {
   top: 3px;
   left: 3px;
   transform: none;
   border-radius: 2px;
   background: var(--na-accent);
   color: #fff;
}
.hm-box-desk { left: 54%; top: 19%; width: 46%; height: 41%; }

.hm-stamp {
   position: absolute;
   left: 12px;
   bottom: 12px;
   display: inline-flex;
   align-items: center;
   gap: 6px;
   padding: 5px 9px;
   border-radius: 999px;
   background: rgba(20, 19, 14, .8);
   color: #fff;
   font-size: 11.5px;
   font-weight: 600;
   backdrop-filter: blur(6px);
}
.hm-stamp b { color: #E3B4FF; font-weight: 600; }
.hm-stamp svg { color: #E3B4FF; }

.hm-detcap {
   display: flex;
   justify-content: space-between;
   gap: 12px;
   margin-top: 10px;
   font-size: 12.5px;
   color: var(--na-ink-3);
}

/* ---------- sections ---------- */

.hm-sec { padding: 56px 0; }
.hm-sec + .hm-sec { padding-top: 0; }

.hm-sechead {
   display: flex;
   align-items: flex-end;
   justify-content: space-between;
   gap: 20px;
   margin-bottom: 20px;
}
.hm-sechead .hm-sub { max-width: 640px; margin-top: 6px; }

/* The generated featured list is the city page's <ul id="location-results-list">, so the grid
   comes from screen.css. Only the home page's breakpoints are set here. */
@media (max-width: 1024px) {
   .featured-stays-grid #location-results-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
   .featured-stays-grid #location-results-list { grid-template-columns: 1fr; }
}

/* ---------- how we verify ---------- */

.hm-how {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 18px;
}
.hm-step {
   display: flex;
   flex-direction: column;
   gap: 10px;
   background: #fff;
   border: 1px solid var(--na-line);
   border-radius: 20px;
   padding: 22px 22px 20px;
   box-shadow: var(--na-shadow);
}
.hm-ic {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 36px;
   height: 36px;
   border-radius: 10px;
   background: var(--na-accent-soft);
   color: var(--na-accent-ink);
}
.hm-ic.is-mbps { background: var(--na-mbps-soft); color: var(--na-mbps); }
.hm-ic.is-neutral { background: var(--na-line-2); color: var(--na-ink); }

.hm-step h3 {
   margin: 4px 0 0;
   font-family: var(--na-font-editorial);
   font-size: 22px;
   font-weight: 500;
   letter-spacing: -0.4px;
   line-height: 1.15;
}
.hm-step p {
   color: var(--na-ink-2);
   font-size: 14px;
   line-height: 1.55;
   text-wrap: pretty;
}
.hm-srcrow {
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
}
.hm-srcrow .wifi-badge { font-size: 12px; padding: 4px 9px 4px 9px; }

.hm-step .hm-stat {
   margin-top: auto;
   padding-top: 10px;
   border-top: 1px dashed var(--na-line);
   font-size: 12.5px;
   font-weight: 500;
   color: var(--na-ink-3);
   font-feature-settings: "tnum";
}
.hm-step .hm-stat b { color: var(--na-ink); font-weight: 700; }

/* Just the call to action now — with only one thing in it, a bordered card around a button read
   as an empty box. */
.hm-howfoot {
   display: flex;
   justify-content: center;
   margin-top: 22px;
}

/* ---------- cities ---------- */

.hm-cities {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 14px;
}
.hm-city {
   display: block;
   overflow: hidden;
   background: #fff;
   border: 1px solid var(--na-line);
   border-radius: 14px;
   box-shadow: var(--na-shadow);
   color: var(--na-ink);
   transition: border-color .15s ease, transform .15s ease;
}
.hm-city:hover {
   border-color: var(--na-ink);
   transform: translateY(-2px);
   color: var(--na-ink);
}
.hm-city-img {
   display: block;
   aspect-ratio: 16 / 9;
   overflow: hidden;
   background: var(--na-line-2);
}
.hm-city-img img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
   transition: transform .3s ease;
}
.hm-city:hover .hm-city-img img { transform: scale(1.04); }
.hm-city-body { display: block; padding: 12px 14px 14px; }
.hm-city-name {
   display: block;
   font-family: var(--na-font-editorial);
   font-size: 20px;
   font-weight: 500;
   letter-spacing: -0.4px;
   line-height: 1.1;
}
.hm-city-country {
   display: block;
   margin-top: 1px;
   font-size: 12px;
   font-weight: 500;
   color: var(--na-ink-3);
}
.hm-city-row {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   margin-top: 12px;
   padding-top: 10px;
   border-top: 1px dashed var(--na-line);
}
.hm-city-row b {
   display: block;
   font-size: 14px;
   font-weight: 700;
   letter-spacing: -0.3px;
   font-feature-settings: "tnum";
}
.hm-city-row small {
   display: block;
   font-size: 10.5px;
   font-weight: 500;
   letter-spacing: 0.2px;
   color: var(--na-ink-3);
}
.hm-city-mbps b { color: var(--na-mbps); }

/* ---------- newsletter ---------- */

.hm-nl { padding: 48px 0; }
.hm-nl-card {
   display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
   gap: 32px;
   align-items: center;
   background: #fff;
   border: 1px solid var(--na-line);
   border-radius: 20px;
   box-shadow: var(--na-shadow);
   padding: 32px;
}
.hm-nl-card h2 {
   margin: 0;
   font-family: var(--na-font-editorial);
   font-size: 28px;
   font-weight: 500;
   letter-spacing: -0.6px;
   line-height: 1.1;
}
.hm-nl-card p {
   margin-top: 8px;
   max-width: 46ch;
   font-size: 14px;
   color: var(--na-ink-2);
}
.hm-nl-card form {
   display: flex;
   align-items: center;
   gap: 8px;
   width: 100%;
   max-width: 440px;
   height: 50px;
   padding: 0 5px 0 16px;
   border-radius: 999px;
   border: 1px solid var(--na-line);
   background: #fff;
   justify-self: end;
}
.hm-nl-card input {
   flex: 1;
   min-width: 0;
   border: 0;
   outline: 0;
   background: transparent;
   font-family: var(--na-font-ui);
   font-size: 14px;
   color: var(--na-ink);
}
.hm-nl-card button {
   height: 38px;
   padding: 0 16px;
   border-radius: 999px;
   border: 0;
   background: var(--na-ink);
   color: #fff;
   font-family: var(--na-font-ui);
   font-size: 13px;
   font-weight: 600;
   cursor: pointer;
}
.hm-nl-alert { grid-column: 1 / -1; }

/* ---------- mobile ---------- */

@media (max-width: 640px) {
   .hm-w { padding: 0 16px; }

   .hm-hero { padding: 22px 0 24px; }
   .hm-hero-grid { grid-template-columns: 1fr; gap: 20px; }
   .hm-h1 { font-size: 32px; letter-spacing: -0.8px; }
   .hm-hero .hm-sub { font-size: 14.5px; margin-top: 10px; }
   .hm-search { margin-top: 16px; height: 48px; }
   .hm-search-go { height: 38px; padding: 0 14px; }

   /* Four cells at 390px print two characters per line. The strip is the hero's proof, so it
      wraps to 2x2 instead of scrolling out of sight. */
   .hm-hero .stats-strip {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      width: 100%;
      overflow: visible;
      margin-top: 16px;
   }
   .hm-hero .stats-strip .stat-cell { padding: 10px 14px; }
   .hm-hero .stats-strip .stat-cell:nth-child(odd) { border-right: 1px solid var(--na-line); }
   .hm-hero .stats-strip .stat-cell:nth-child(even) { border-right: 0; }
   .hm-hero .stats-strip .stat-cell:nth-child(-n+2) { border-bottom: 1px solid var(--na-line); }
   .hm-hero .stats-strip .stat-value { font-size: 18px; }
   .hm-hero .stats-strip .stat-sub { display: inline; }

   .hm-detcap { flex-direction: column; gap: 2px; }

   .hm-sec { padding: 36px 0; }
   .hm-sechead { flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 14px; }
   .hm-h2 { font-size: 24px; }

   .hm-how { grid-template-columns: 1fr; gap: 14px; }

   .hm-cities { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
   .hm-city { padding: 12px; }
   .hm-city-name { font-size: 17px; }
   .hm-city-row b { font-size: 13px; }


   .hm-nl { padding: 32px 0; }
   .hm-nl-card { grid-template-columns: 1fr; gap: 16px; padding: 22px; }
   .hm-nl-card h2 { font-size: 23px; }
   .hm-nl-card form { justify-self: start; }
}

@media (max-width: 1024px) and (min-width: 641px) {
   .hm-hero-grid { grid-template-columns: 1fr; gap: 24px; }
   .hm-cities { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}