@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");

/* Day 15 (Layout day): CSS variable for the fixed-navbar height.
   Referenced anywhere the map area or its overlays need to clear the
   navbar (panel top offset, map-section height/margin, CTA positions). */
:root {
  --navbar-h: 64px;
}

html {
  scroll-behavior: smooth;
}

/* ===== Base / Reset ===== */

/* Apply box-sizing: border-box to every element.
   Means: width includes padding + border, not just content. */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Body: default font, line height, text color. */
body {
  font-family:
    "Inter",
    system-ui,
    -apple-system,
    sans-serif;
  line-height: 1.6;
  color: #1a1a1a;
  background-color: #fafafa;
}

h1,
h2,
h3 {
  font-family: "Inter", system-ui, sans-serif;
  letter-spacing: -0.02em;
}

a {
  text-decoration: none;
  color: inherit;
}

ul,
ol {
  list-style: none;
}

/* ===== Layout container ===== */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* ===== Header & Navbar =====
   Day 15: navbar is fixed-position, frosted/blurred. It floats above
   the full-bleed map (z-index: 100) on the map screen, and continues
   to float over content sections as the user scrolls below the fold. */
header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--navbar-h);
  background-color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(229, 229, 229, 0.6);
}

.navbar {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  font-family: "Inter", system-ui, sans-serif;
  letter-spacing: -0.03em;
  font-size: 1.5rem;
  font-weight: 700;
  color: #2563eb;
}

.nav-links {
  display: flex;
  gap: 2rem;
}

.nav-links a {
  color: #555;
  font-weight: 500;
  transition: color 0.15s ease;
}

.nav-links a:hover {
  color: #2563eb;
}

/* ===== Hero =====
   Day 15: Hero moved BELOW the map. The map itself is the landing
   experience; the hero is the first scrolled-into-view section that
   explains what the user just saw. Slightly smaller h1 since it's no
   longer the literal first thing the user reads. */
.hero {
  padding: 5rem 0;
  background: linear-gradient(180deg, #fafafa 0%, #f0f4ff 100%);
  text-align: center;
}

.hero h1 {
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 1.5rem;
  color: #0f172a;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.hero-subtitle {
  font-size: 1.15rem;
  color: #475569;
  max-width: 600px;
  margin: 0 auto;
}

/* ===== How it works ===== */
.how-it-works {
  padding: 5rem 0;
}

.how-it-works h2 {
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 3rem;
  color: #0f172a;
}

.how-it-works ol {
  list-style: decimal inside;
  max-width: 700px;
  margin: 0 auto;
}

.how-it-works li {
  font-size: 1.05rem;
  margin-bottom: 1rem;
  padding-left: 0.5rem;
  color: #334155;
}

/* ===== FHA Disclosure ===== */
.disclosure {
  padding: 4rem 0;
  background-color: #f8fafc;
  border-top: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;
  text-align: center;
}

.disclosure h2 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: #0f172a;
}

.disclosure p {
  max-width: 750px;
  color: #475569;
  font-size: 1rem;
  margin: 0 auto;
  text-align: left;
}

/* ===== Footer ===== */
footer {
  padding: 2rem 0;
  border-top: 1px solid #e5e5e5;
  background-color: white;
}

footer p {
  text-align: center;
  color: #64748b;
  font-size: 0.875rem;
}

footer a {
  color: #2563eb;
}

footer a:hover {
  text-decoration: underline;
}

/* ===== Utility ===== */
.hidden {
  display: none !important;
}

/* ===== Buttons ===== */

/* Primary action button (form submits) */
.btn-primary {
  background: #2563eb;
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 0.5rem;
  cursor: pointer;
  font-family: inherit;
}

.btn-primary:hover {
  background: #1d4ed8;
}

/* Disabled state for submit buttons during fetch (Day 13 Part 2).
   Keeps the button visible but signals "in progress / don't click again". */
.btn-primary:disabled {
  background: #93c5fd;
  cursor: not-allowed;
}

/* Inline error banner shown above the submit button on fetch failure
   (Day 13 Part 2). Red/rose palette to match the FHA notice tone.
   Hidden by default via the .hidden utility; app.js toggles it. */
.form-error {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
  border-radius: 0.375rem;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  line-height: 1.4;
  margin-bottom: 0.75rem;
}

/* Secondary button (confirmation screen close) */
.btn-secondary {
  background: white;
  color: #374151;
  border: 1px solid #d1d5db;
  padding: 0.6rem 1.25rem;
  font-size: 0.9rem;
  font-weight: 500;
  border-radius: 0.5rem;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
}

.btn-secondary:hover {
  background: #f9fafb;
}

/* ── Two-CTA bar ─────────────────────────────────────────────────────────
   Day 15: Floating overlay at top-center of the map. Pill-style frosted
   container holds the two CTAs side-by-side. Sits below the fixed
   navbar (top = navbar height + 1rem margin). */
.map-cta-section {
  position: absolute;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 12px;
  padding: 0.5rem;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

.map-cta-bar {
  display: flex;
  gap: 0.5rem;
}

/* Base CTA button — sized for the floating bar */
.btn-cta {
  padding: 0.625rem 1.25rem;
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition:
    background 0.15s,
    transform 0.1s;
}

.btn-cta:active {
  transform: scale(0.98);
}

/* "Post a listing" — primary blue, matches the rest of the site */
.btn-supply {
  background: #2563eb;
  color: white;
}

.btn-supply:hover {
  background: #1d4ed8;
}

/* "I'm looking for a place" — indigo, already used for focus states */
.btn-seek {
  background: #6366f1;
  color: white;
}

.btn-seek:hover {
  background: #4f46e5;
}

/* ── Map hint ────────────────────────────────────────────────────────────
   Day 15: Floats below the CTA bar, center-top of the map. Shown when
   "Post a listing" is clicked; cleared as soon as a pin is dropped. */
#map-hint {
  position: absolute;
  top: 7rem;
  left: 1rem;
  z-index: 10;
  margin: 0;
  padding: 0;
}

.map-hint-text {
  display: inline-block;
  background: #fef9c3;
  border: 1px solid #fde047;
  border-radius: 8px;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  color: #713f12;
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* ── Map section (full-bleed) ────────────────────────────────────────────
   Day 15 (Layout day): the map IS the landing experience — fills the
   full viewport below the fixed navbar, edge-to-edge, no border-radius
   or boxed treatment. All controls (CTAs, search, hint, panels) are
   absolute overlays positioned within #map-layout. */
#map-section {
  position: relative;
  width: 100%;
  height: calc(100vh - var(--navbar-h));
  margin-top: var(--navbar-h);
  padding: 0;
  background: #ffffff;
}

#map-layout {
  position: relative;
  width: 100%;
  height: 100%;
}

#map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  box-shadow: none;
  min-width: 0;
}

/* ── Search wrapper (floating) ───────────────────────────────────────────
   Day 15: Floats at top-left over the map. Frosted white card with
   shadow for legibility against any map background. */
#search-wrapper {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 10;
  width: 320px;
  max-width: calc(100% - 2rem);
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
  margin: 0;
}

.search-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: #374151;
  margin-bottom: 0.35rem;
}

#search-wrapper gmp-place-autocomplete {
  display: block;
  width: 100%;
  font-family: inherit;
  color-scheme: light;
}

/* ── Shared panel styles (supply + seeker + detail) ──────────────────────
   Day 15: Panels are absolute overlays anchored to the right side of
   the map (not flex siblings beside it). They stretch from below the
   navbar down to near the bottom of the map; the map underneath stays
   visible to the left. z-index: 30 so they sit ABOVE the floating
   CTA/search controls. */
#form-panel,
#seeker-panel,
#detail-panel {
  position: absolute;
  top: 1rem;
  right: 1rem;
  bottom: 1rem;
  width: 380px;
  max-width: calc(100% - 2rem);
  overflow-y: auto;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
  z-index: 30;
}

#form-panel-inner,
#seeker-panel-inner,
#detail-panel-inner {
  padding: 1.5rem;
}

/* Close buttons (✕) in all panels. #close-interest is a back arrow (←)
   but shares the same affordance/position, so it lives in the group. */
#close-form,
#close-seeker,
#close-detail,
#close-interest {
  float: right;
  background: none;
  border: none;
  font-size: 1.1rem;
  cursor: pointer;
  color: #6b7280;
  padding: 0;
  line-height: 1;
}

#close-form:hover,
#close-seeker:hover,
#close-detail:hover,
#close-interest:hover {
  color: #111827;
}

/* Panel headings */
#form-panel h3,
#seeker-panel h3,
#detail-panel h3 {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
  color: #111827;
}

.form-subtitle {
  font-size: 0.875rem;
  color: #6b7280;
  margin-bottom: 1.5rem;
}

/* ── Listing type radio group (supply form) */
#listing-type-fieldset {
  border: none;
  padding: 0;
  margin: 0 0 1.25rem 0;
}

#listing-type-fieldset legend {
  font-weight: 600;
  font-size: 0.875rem;
  color: #374151;
  margin-bottom: 0.5rem;
}

.radio-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.radio-group label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  cursor: pointer;
  color: #374151;
}

/* .checkbox-group mirrors .radio-group exactly.
   Used for the acceptable_genders and acceptable_diets multi-select groups
   added 2026-05-14. Kept as a separate class to preserve semantic clarity
   (radio = pick one, checkbox = pick many) even though the layout is identical. */
.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.checkbox-group label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  cursor: pointer;
  color: #374151;
}

/* ── Individual form fields ────────────── */
.field-group {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-bottom: 1rem;
}

.field-group label {
  font-size: 0.825rem;
  font-weight: 600;
  color: #374151;
}

.field-group input,
.field-group select,
.field-group textarea {
  padding: 0.5rem 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 0.9rem;
  font-family: inherit;
  color: #111827;
  background: #f9fafb;
  transition: border-color 0.15s;
}

.field-group input:focus,
.field-group select:focus,
.field-group textarea:focus {
  outline: none;
  border-color: #6366f1;
  background: #ffffff;
}

.field-hint {
  font-size: 0.75rem;
  color: #9ca3af;
}

.warn-text {
  color: #b45309;
}

.required-note {
  color: #ef4444;
}

/* ── Preference fieldset (supply + seeker) */
.pref-fieldset {
  border: 1px solid #fde68a;
  background: #fffbeb;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1rem;
}

.pref-fieldset legend {
  font-size: 0.825rem;
  font-weight: 600;
  color: #374151;
  padding: 0 0.25rem;
}

.legend-note {
  font-weight: 400;
  color: #6b7280;
  font-size: 0.75rem;
}

.fha-inline {
  font-size: 0.775rem;
  color: #92400e;
  background: #fef3c7;
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.75rem;
  line-height: 1.5;
}

/* ── Submit buttons ────────────────────── */
#submit-pin-btn,
#submit-seeker-btn {
  width: 100%;
  margin-top: 0.5rem;
}

/* ── Neighborhood multi-select (seeker form) ─
   Scrollable checkbox list grouped by region. */
.neighborhood-select {
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #f9fafb;
  max-height: 220px;
  overflow-y: auto;
  padding: 0.5rem;
  margin-top: 0.25rem;
}

.neighborhood-group {
  margin-bottom: 0.5rem;
}

.neighborhood-group:last-child {
  margin-bottom: 0;
}

.neighborhood-group-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6b7280;
  padding: 0.25rem 0.25rem 0.15rem 0.25rem;
}

.neighborhood-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0.25rem;
  font-size: 0.85rem;
  color: #374151;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.1s;
}

.neighborhood-item:hover {
  background: #e0e7ff;
}

.neighborhood-item input[type="checkbox"] {
  accent-color: #6366f1;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  /* Override .field-group input padding/border — checkboxes don't need it */
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
}

/* ── Confirmation screen (inside either panel) ─ */
.confirm-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2rem 1rem;
  gap: 1rem;
}

.confirm-icon {
  font-size: 2.5rem;
}

.confirm-screen h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #111827;
}

.confirm-screen p {
  font-size: 0.9rem;
  color: #374151;
  line-height: 1.6;
}

.confirm-note {
  font-size: 0.8rem !important;
  color: #9ca3af !important;
}

/* ── Price-label custom markers (Day 14.5) ──
   Airbnb/Zillow pattern: rent shown inline on a pill, color-coded by
   listing type (locked §2, 2026-05-11). Green = owner, blue = subleaser.
   These replace the default red AdvancedMarkerElement for APPROVED
   listings only — the user's own in-progress dropped pin stays the
   default red draggable marker (different object, intentional contrast). */
.pin-marker {
  display: inline-block;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  border: 1.5px solid #ffffff;
  cursor: pointer;
  transform: translateY(-50%);
  transition: transform 0.1s ease;
}

.pin-marker:hover {
  transform: translateY(-50%) scale(1.06);
}

.pin-marker--owner {
  background: #16a34a;
}

.pin-marker--subleaser {
  background: #2563eb;
}

/* ── Pin detail panel content (Day 14.5) ──
   #detail-fields and #detail-amenities are populated by app.js. */
#detail-fields {
  margin-bottom: 1.25rem;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid #f1f5f9;
  font-size: 0.9rem;
}

.detail-row:last-child {
  border-bottom: none;
}

.detail-label {
  color: #6b7280;
  font-weight: 500;
  flex-shrink: 0;
}

.detail-value {
  color: #111827;
  font-weight: 600;
  text-align: right;
}

/* Description gets its own full-width block, not a label/value row. */
.detail-description {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid #f1f5f9;
}

.detail-description .detail-label {
  display: block;
  margin-bottom: 0.35rem;
}

.detail-description p {
  font-size: 0.9rem;
  color: #374151;
  line-height: 1.6;
  white-space: pre-wrap;
}

/* ── Nearby amenities (Day 14.5 renderer; data filled Day 14.6) ── */
#detail-amenities {
  margin-bottom: 1.25rem;
}

.amenities-heading {
  font-size: 0.825rem;
  font-weight: 700;
  color: #374151;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.25rem;
}

.amenities-radius {
  font-size: 0.7rem;
  color: #9ca3af;
  margin-top: 0;
  margin-bottom: 0.5rem;
}

.walkscore-badges {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}

.walkscore-badge {
  flex: 1;
  min-width: 70px;
  text-align: center;
  background: #f0f4ff;
  border: 1px solid #c7d2fe;
  border-radius: 8px;
  padding: 0.4rem 0.5rem;
}

.walkscore-badge .score {
  display: block;
  font-size: 1.1rem;
  font-weight: 800;
  color: #4338ca;
  line-height: 1.2;
}

.walkscore-badge .score-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b7280;
}

.amenity-category {
  margin-bottom: 0.6rem;
}

.amenity-category-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6b7280;
  margin-bottom: 0.2rem;
}

.amenity-item {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.825rem;
  color: #374151;
  padding: 0.15rem 0;
}

.amenity-item .amenity-dist {
  color: #9ca3af;
  flex-shrink: 0;
}

/* ── Interest mini-step register prompt ── */
.interest-register-prompt {
  margin-top: 1rem;
  font-size: 0.825rem;
  color: #6b7280;
  text-align: center;
}

.interest-register-prompt a {
  color: #6366f1;
  font-weight: 600;
}

.interest-register-prompt a:hover {
  text-decoration: underline;
}

/* Report row — sits below the "I'm interested" CTA in the detail panel.
   Day 17. Visually de-emphasized so it never competes with the primary
   interest CTA but is reliably present at the bottom of every listing. */
.report-row {
  margin-top: 1.25rem;
  text-align: center;
  font-size: 0.825rem;
  color: #9ca3af;
}

.report-row a {
  color: #9ca3af;
  text-decoration: underline;
  text-decoration-color: #d1d5db;
}

.report-row a:hover {
  color: #6b7280;
  text-decoration-color: #6b7280;
}

.report-row.reported,
.report-row.reporting {
  color: #6b7280;
  cursor: default;
}

.report-row.reported a,
.report-row.reporting a {
  color: #6b7280;
  text-decoration: none;
  pointer-events: none;
}

/* ── Mobile (≤768px) ─────────────────────────────────────────────────────
   Day 15: Restructured for the full-bleed map layout.
   - Navbar stays HORIZONTAL on mobile (column would push controls too
     low and eat into the map). Slightly shorter height via padding.
   - Search bar: stretches full-width at top under the navbar.
   - CTAs: move to bottom-center (still floating) so they don't compete
     with the search bar at the top.
   - Map hint: anchors center, between search and CTAs.
   - Panels: bottom-sheet pattern — full width, slide up from the bottom,
     taking ~80% of the visible map height. The map underneath stays
     visible at the top so the user retains context. */
@media (max-width: 768px) {
  .navbar {
    padding: 0 1rem;
  }

  .nav-links {
    gap: 1rem;
    font-size: 0.875rem;
  }

  .hero h1 {
    font-size: 2rem;
  }

  .hero-subtitle {
    font-size: 1rem;
  }

  /* Search bar: stretch full-width at top */
  #search-wrapper {
    width: auto;
    left: 1rem;
    right: 1rem;
    max-width: none;
  }

  /* CTAs: move to bottom-center, stack vertically for tap targets */
  .map-cta-section {
    top: auto;
    bottom: 1rem;
    left: 1rem;
    right: 1rem;
    transform: none;
    padding: 0.5rem;
  }

  .map-cta-bar {
    flex-direction: column;
    gap: 0.4rem;
  }

  .btn-cta {
    width: 100%;
  }

  /* Map hint: anchor below the search bar */
  #map-hint {
    top: 5rem;
  }

  /* Panels: bottom-sheet pattern */
  #form-panel,
  #seeker-panel,
  #detail-panel {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: none;
    height: 80vh;
    border-radius: 16px 16px 0 0;
    border-bottom: none;
  }
}

/* ── Photo upload section — supply form (Day 18) ─────────────────────────
   The file input is hidden; the "Add photo" button triggers it.
   Preview strip wraps once the row fills (flex-wrap). */

.photo-preview-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.photo-preview-strip:empty {
  display: none;
}

.photo-thumb {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #d1d5db;
  background: #f3f4f6;
  flex-shrink: 0;
}

.photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-thumb-remove {
  position: absolute;
  top: 3px;
  right: 3px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  font-size: 0.6rem;
  line-height: 18px;
  text-align: center;
  cursor: pointer;
  padding: 0;
}

.photo-thumb-remove:hover {
  background: rgba(0, 0, 0, 0.8);
}

/* Small variant of btn-secondary — used for the "+ Add photo" button so it
   doesn't visually compete with the main Submit button. */
.btn-small {
  padding: 0.3rem 0.7rem;
  font-size: 0.8rem;
  align-self: flex-start;
}

/* ── Detail panel photo strip (Day 18) ───────────────────────────────────
   Horizontal scroll strip; each photo renders at 200px height with
   width derived from its natural aspect ratio (set inline by JS).
   No layout shift: JS sets inline width + height from stored w/h dims
   before the image loads, so the browser reserves the exact space. */

.detail-photo-strip {
  display: flex;
  overflow-x: auto;
  gap: 0.5rem;
  margin-bottom: 1rem;
  padding-bottom: 0.35rem;
  scrollbar-width: thin;
  scrollbar-color: #d1d5db transparent;
}

.detail-photo-strip::-webkit-scrollbar {
  height: 4px;
}

.detail-photo-strip::-webkit-scrollbar-track {
  background: transparent;
}

.detail-photo-strip::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 2px;
}

.detail-photo-item {
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
  background: #f3f4f6; /* placeholder color shown before image loads */
}

.detail-photo-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

/* ── Photo lightbox (Day 18) ─────────────────────────────────────────────
   Full-screen overlay; above all panels (z-index 200).
   Clicking the backdrop (the overlay itself, not the image) dismisses it.
   Nav arrows hidden for single-photo listings (JS toggles display). */

#photo-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.88);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
}

#photo-lightbox.hidden {
  display: none !important;
}

#lightbox-img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 6px;
  display: block;
  /* Prevent the image click from bubbling to the backdrop dismiss handler */
  pointer-events: none;
}

.lightbox-close {
  position: fixed;
  top: 1rem;
  right: 1rem;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 201;
  transition: background 0.15s;
}

.lightbox-close:hover {
  background: rgba(255, 255, 255, 0.3);
}

.lightbox-nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  z-index: 201;
  transition: background 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-nav:hover {
  background: rgba(255, 255, 255, 0.3);
}

.lightbox-prev { left: 1rem; }
.lightbox-next { right: 1rem; }