/* ─── Fonts (self-hosted via /static/vendor/css/dm-sans.css) ─────────────── */
body, * {
  font-family: 'DM Sans', system-ui, sans-serif !important;
}

/* ─── DaisyUI 4 theme override ───────────────────────────────────────────── */
/* DaisyUI v4 uses short variable names: --p --s --a --n --b1 etc.           */
/* Values are oklch L% C H components WITHOUT the oklch() wrapper.           */
/* Our custom.css loads AFTER DaisyUI CDN so :root here wins the cascade.    */

:root,
[data-theme="latarnia"] {
  color-scheme: light;

  /* Primary: warm terracotta/brick — old Warsaw, aged ceramic */
  --p:  48% 0.13 30;
  --pc: 96% 0.005 30;

  /* Secondary: deep warm ink — aged leather, not navy, not army */
  --s:  18% 0.025 50;
  --sc: 90% 0.008 50;

  /* Accent: antique brass/gold */
  --a:  68% 0.12 78;
  --ac: 20%  0.04 78;

  /* Neutral */
  --n:  28% 0.02 50;
  --nc: 90% 0.01 50;

  /* Backgrounds: aged paper / warm cream */
  --b1: 96%  0.008 85;
  --b2: 91%  0.008 85;
  --b3: 85%  0.008 85;
  --bc: 20%  0.02  50;

  /* Semantic */
  --in:  68% 0.17 230;
  --inc: 98% 0 0;
  --su:  62% 0.17 155;
  --suc: 98% 0 0;
  --wa:  78% 0.17 78;
  --wac: 20% 0.04 78;
  --er:  56% 0.20 22;
  --erc: 98% 0 0;

  /* Border radius */
  --rounded-box:  0.5rem;
  --rounded-btn:  0.375rem;
  --rounded-badge: 1rem;
}

/* ─── Alpine x-cloak ─────────────────────────────────────────────────────── */
[x-cloak] { display: none !important; }

/* ─── Map ────────────────────────────────────────────────────────────────── */
#map {
  height: calc(100vh - 4rem);
  width: 100%;
}

#upload-map {
  height: 280px;
  width: 100%;
  border-radius: 0.5rem;
  z-index: 0;
}


/* ─── Photo masonry grid ─────────────────────────────────────────────────── */
.photo-grid {
  columns: 2;
  column-gap: 0.75rem;
  margin-bottom: -0.75rem; /* cancel last row's margin so container bottom aligns with photos */
}

@media (min-width: 768px)  { .photo-grid { columns: 3; } }
@media (min-width: 1280px) { .photo-grid { columns: 4; } }

.photo-grid-item {
  break-inside: avoid;
  margin-bottom: 0.75rem;
}

/* ─── Hero gradient ──────────────────────────────────────────────────────── */
.hero-gradient {
  background: linear-gradient(150deg, oklch(18% 0.025 50) 0%, oklch(13% 0.015 50) 100%);
}

/* ─── Navbar brand ───────────────────────────────────────────────────────── */
.navbar-brand {
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* ─── Home carousel ──────────────────────────────────────────────────────── */
@keyframes lk-slide-next {
  from { opacity: 0; transform: translateX(32px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes lk-slide-prev {
  from { opacity: 0; transform: translateX(-32px); }
  to   { opacity: 1; transform: translateX(0); }
}
.lk-carousel-next { animation: lk-slide-next 0.28s ease-out; }
.lk-carousel-prev { animation: lk-slide-prev 0.28s ease-out; }

/* Photo images: always portrait 9/16, no inline style needed */
.lk-photo-img {
  aspect-ratio: 9/16;
  width: 100%;
  object-fit: cover;
  display: block;
}

/* Carousel outer: column on mobile, row (side arrows) on desktop */
.lk-carousel-outer {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
@media (min-width: 768px) {
  .lk-carousel-outer {
    flex-direction: row;
    align-items: center;
    gap: 1rem;
  }
}

/* Grid wrapper replaces flex-1 min-w-0 overflow-hidden rounded-lg */
.lk-carousel-grid-wrap {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  border-radius: 0.5rem;
}

/* Mobile nav (prev/next) rendered below the grid */
/* display:flex lives on the element as a Tailwind class so md:hidden can override it */
.lk-carousel-mobile-nav {
  justify-content: space-evenly;
}

/* ─── Auto-hide navbar on mobile scroll ─────────────────────────────────── */
@media (max-width: 1023px) {
  nav.navbar {
    transition: transform 0.25s ease;
  }
  nav.navbar.navbar-hidden {
    transform: translateY(-100%);
  }
}

/* ─── Hero responsive ────────────────────────────────────────────────────── */

/* Mobile portrait: compact hero */
@media (max-width: 767px) and (orientation: portrait) {
  .lk-hero { padding-top: 2.5rem; padding-bottom: 2.5rem; }
}

/* Mobile landscape: minimal hero strip */
@media (max-width: 1023px) and (orientation: landscape) {
  .lk-hero           { padding-top: 0.5rem; padding-bottom: 0.5rem; }
  .lk-hero-title     { font-size: 1.25rem; margin-bottom: 0; }
  .lk-hero-subtitle  { display: none; }
  .lk-hero-buttons   { display: none; }
}

/* ─── Photo grid: 4 columns on mobile landscape ──────────────────────────── */
@media (max-width: 1023px) and (orientation: landscape) {
  .photo-grid { columns: 4; }
}

/* ─── Flash fade ─────────────────────────────────────────────────────────── */
.flash-success {
  animation: fadeOut 4s ease-in-out forwards;
  animation-delay: 2s;
}

@keyframes fadeOut {
  from { opacity: 1; }
  to   { opacity: 0; pointer-events: none; }
}

/* ─── Photo metadata table ───────────────────────────────────────────────── */
.lk-meta-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  line-height: 1.5;
}
.lk-meta-table td {
  padding: 0.42rem 0;
  border-bottom: 1px solid oklch(87% 0.008 85);
  vertical-align: middle;
}
.lk-meta-table tr:last-child td {
  border-bottom: none;
}
.lk-meta-table td:first-child {
  width: 8.5rem;
  color: oklch(54% 0.015 50);
  font-weight: 500;
  letter-spacing: 0.01em;
}
.lk-meta-table td:last-child {
  color: oklch(24% 0.025 50);
}

/* ─── Terms page ─────────────────────────────────────────────────────────── */
.terms-body {
  max-width: 680px;
  margin: 0 auto;
  color: oklch(18% 0.02 264);
  line-height: 1.75;
}

.terms-body h1 {
  font-size: 1.875rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
  color: oklch(18% 0.02 264);
}

.terms-body h2 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-top: 2rem;
  margin-bottom: 0.5rem;
  color: oklch(18% 0.02 264);
  border-bottom: 1px solid oklch(87% 0.003 90);
  padding-bottom: 0.35rem;
}

.terms-body p {
  margin-bottom: 1rem;
  font-size: 0.9375rem;
}

.terms-body a {
  color: oklch(40% 0.20 22);
  text-decoration: underline;
  text-decoration-color: oklch(70% 0.12 22);
  text-underline-offset: 2px;
}

.terms-body hr {
  border: none;
  border-top: 1px solid oklch(87% 0.003 90);
  margin: 2rem 0;
}

.terms-body .meta {
  font-size: 0.8125rem;
  color: oklch(55% 0.01 264);
}