/*
============================================
  Alpenstraße 8 — Ferienwohnung Dresden
  CSS Design System

  Inspired by revela.website / Lumina theme
  - Fluid typography (Utopia scale)
  - HSL color system with dark mode
  - CSS Grid layout
  - No frameworks, no JavaScript
============================================
*/

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  color-scheme: light dark;

  /* ── Accent Color (burgundy/wine red from logo) ── */
  --accent-hsl: 350deg 45% 38%;
  --accent-light-hsl: 350deg 50% 50%;

  /* ── Text Colors ── */
  --color-hsl: 30deg 10% 20%;
  --color-light-hsl: 30deg 5% 45%;
  --color-dark-hsl: 30deg 10% 10%;

  /* ── Background ── */
  --color-background-hsl: 38deg 25% 97%;
  --color-surface-hsl: 38deg 20% 93%;

  /* ── Availability Calendar ── */
  --color-free-hsl: 142deg 50% 45%;
  --color-booked-hsl: 0deg 55% 55%;

  /* ── Animation ── */
  --animation-time: 250ms;

  /* ── Fluid Typography (Utopia: 320px → 1140px) ── */
  --font-size-0: clamp(0.8125rem, 0.7476rem + 0.3247vw, 1rem);
  --font-size-1: clamp(0.9375rem, 0.8452rem + 0.4618vw, 1.2rem);
  --font-size-2: clamp(1.0625rem, 0.9337rem + 0.644vw, 1.44rem);
  --font-size-3: clamp(1.25rem, 1.0762rem + 0.869vw, 1.728rem);
  --font-size-4: clamp(1.4375rem, 1.199rem + 1.1925vw, 2.0736rem);
  --font-size-5: clamp(1.6875rem, 1.3574rem + 1.6506vw, 2.4883rem);

  /* ── Fluid Spacing (Utopia) ── */
  --space-3xs: clamp(0.1875rem, 0.1631rem + 0.122vw, 0.25rem);
  --space-2xs: clamp(0.375rem, 0.3262rem + 0.2439vw, 0.5rem);
  --space-xs: clamp(0.5625rem, 0.4878rem + 0.3736vw, 0.75rem);
  --space-s: clamp(0.75rem, 0.6524rem + 0.4878vw, 1rem);
  --space-m: clamp(1.125rem, 0.9756rem + 0.7485vw, 1.5rem);
  --space-l: clamp(1.5rem, 1.3049rem + 0.9756vw, 2rem);
  --space-xl: clamp(2.25rem, 1.9573rem + 1.4634vw, 3rem);
  --space-2xl: clamp(3rem, 2.6098rem + 1.9512vw, 4rem);
  --space-3xl: clamp(4.5rem, 3.9146rem + 2.9268vw, 6rem);

  /* ── Layout ── */
  --content-max-width: 860px;
  --breakout-max-width: 1100px;
  --breakout-size: calc((var(--breakout-max-width) - var(--content-max-width)) / 2);
}

/* ── Dark Mode ── */
@media (prefers-color-scheme: dark) {
  :root {
    --color-hsl: 30deg 10% 85%;
    --color-light-hsl: 30deg 5% 55%;
    --color-dark-hsl: 30deg 10% 92%;
    --color-background-hsl: 30deg 8% 8%;
    --color-surface-hsl: 30deg 8% 12%;
    --accent-hsl: 350deg 45% 55%;
    --accent-light-hsl: 350deg 50% 65%;
    --color-free-hsl: 142deg 45% 40%;
    --color-booked-hsl: 0deg 50% 45%;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --animation-time: 0ms;
  }
}

/* ============================================
   Base Typography
   ============================================ */

html {
  scrollbar-gutter: stable;
}

body {
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 300;
  font-size: var(--font-size-1);
  line-height: 1.65;
  color: hsl(var(--color-hsl));
  background-color: hsl(var(--color-background-hsl));
  display: grid;
  grid-template-columns:
    [full-width-start] minmax(var(--space-s), 1fr)
    [breakout-start] minmax(0, var(--breakout-size))
    [content-start] min(100% - (var(--space-s) * 2), var(--content-max-width))
    [content-end] minmax(0, var(--breakout-size))
    [breakout-end] minmax(var(--space-s), 1fr)
    [full-width-end];
  min-height: 100dvh;
  grid-template-rows: auto 1fr auto;
}

body > * {
  grid-column: content;
}

h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
  font-weight: 300;
  letter-spacing: 0.04em;
  color: hsl(var(--color-dark-hsl));
  line-height: 1.3;
}

h1 {
  font-size: var(--font-size-5);
  margin-bottom: var(--space-l);
}

h2 {
  font-size: var(--font-size-4);
  margin-top: var(--space-xl);
  margin-bottom: var(--space-m);
  padding-bottom: var(--space-2xs);
  border-bottom: none;
}

h2::after {
  content: "";
  display: block;
  width: 8rem;
  height: 2px;
  background: hsl(var(--accent-hsl) / 0.5);
  margin-top: var(--space-2xs);
  border-radius: 1px;
}

h3 {
  font-size: var(--font-size-3);
  margin-top: var(--space-l);
  margin-bottom: var(--space-s);
}

p, li, figcaption {
  text-wrap: pretty;
  max-width: 72ch;
}

p {
  margin-bottom: var(--space-m);
}

a {
  color: hsl(var(--accent-hsl));
  text-decoration: none;
  border-bottom: 1px solid hsl(var(--accent-hsl) / 0.3);
  transition-property: color, border-color;
  transition-duration: var(--animation-time);
  transition-timing-function: ease-in-out;
}

a:hover {
  color: hsl(var(--accent-light-hsl));
  border-bottom-color: hsl(var(--accent-light-hsl) / 0.6);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

ul, ol {
  padding-left: var(--space-l);
  margin-bottom: var(--space-m);
}

/* ============================================
   Logo Banner (scrolls away)
   ============================================ */

.site-banner {
  grid-column: full-width;
  display: flex;
  justify-content: center;
  padding: var(--space-l) var(--space-s) var(--space-m);
  background: #fff;
}

.site-banner a {
  border-bottom: none;
  display: inline-block;
}

.site-logo {
  max-width: min(600px, 85vw);
  height: auto;
}

/* ============================================
   Header / Navigation (sticky)
   ============================================ */

.site-header {
  grid-column: full-width;
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: hsl(var(--color-background-hsl) / 0.6);
  backdrop-filter: saturate(180%) blur(2rem);
  -webkit-backdrop-filter: saturate(180%) blur(2rem);
  padding: var(--space-xs) 0;
  border-bottom: 1px solid hsl(var(--color-hsl) / 0.06);
  box-shadow: 0 1px 8px hsl(var(--color-hsl) / 0.04);
}

.site-header .header-inner {
  max-width: var(--breakout-max-width);
  margin: 0 auto;
  padding: 0 var(--space-s);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

/* ── Navigation ── */

.main-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-2xs) var(--space-m);
  list-style: none;
  padding: 0;
  margin: 0;
}

.main-nav a {
  font-size: var(--font-size-1);
  font-weight: 400;
  color: hsl(var(--color-light-hsl));
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding: 2px 0;
  transition-property: color, border-color;
  transition-duration: var(--animation-time);
}

.main-nav a:hover {
  color: hsl(var(--accent-hsl));
  border-bottom-color: hsl(var(--accent-hsl) / 0.4);
}

.main-nav a.active {
  color: hsl(var(--accent-hsl));
  border-bottom-color: hsl(var(--accent-hsl));
  pointer-events: none;
}

/* ── Mobile Navigation ── */

@media (width <= 600px) {
  .site-header {
    position: relative;
  }

  .main-nav {
    flex-direction: column;
    width: 100%;
    gap: var(--space-xs);
  }
}

/* ============================================
   Hero Panorama (Startseite)
   ============================================ */

.hero-panorama {
  grid-column: full-width;
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  height: clamp(140px, 20vw, 280px);
  overflow: hidden;
  line-height: 0;
}

.hero-panorama img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  box-shadow: 0 1px 8px hsl(var(--color-hsl) / 0.04);
}

/* ============================================
   Main Content
   ============================================ */

main {
  grid-column: content;
  margin-top: var(--space-xl);
  margin-bottom: var(--space-2xl);
}

.page-intro {
  font-size: var(--font-size-2);
  color: hsl(var(--color-light-hsl));
  margin-bottom: var(--space-xl);
  max-width: 64ch;
}

/* ── Content Image ── */

.content-image {
  margin: var(--space-l) 0;
  border-radius: var(--space-2xs);
  overflow: hidden;
  box-shadow: 0 4px 16px hsl(var(--color-hsl) / 0.08);
}

.content-image img {
  width: 100%;
  height: auto;
}

/* ── Info Grid (Preise, Ausstattung) ── */

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-m);
  margin: var(--space-l) 0;
}

.info-card {
  padding: var(--space-m);
  background: hsl(var(--color-surface-hsl));
  border-radius: var(--space-2xs);
  border-top: 3px solid hsl(var(--accent-hsl) / 0.5);
  box-shadow: 0 2px 8px hsl(var(--color-hsl) / 0.06);
  transition: transform var(--animation-time) ease-in-out, box-shadow var(--animation-time) ease-in-out;
}

.info-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px hsl(var(--color-hsl) / 0.1);
}

.info-card .label {
  font-size: var(--font-size-0);
  color: hsl(var(--color-light-hsl));
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-3xs);
}

.info-card .value {
  font-size: var(--font-size-3);
  font-weight: 400;
  color: hsl(var(--accent-hsl));
}

/* ── Highlights ── */

.highlight-list {
  list-style: none;
  padding: 0;
}

.highlight-item {
  padding: var(--space-m) 0;
  border-bottom: 1px solid hsl(var(--color-hsl) / 0.1);
}

.highlight-item:last-child {
  border-bottom: none;
}

.highlight-item h3 {
  margin-top: 0;
  margin-bottom: var(--space-xs);
}

/* ============================================
   Availability Calendar
   ============================================ */

.calendar-year {
  margin-bottom: var(--space-xl);
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-l);
}

.calendar-month {
  background: hsl(var(--color-surface-hsl));
  border-radius: var(--space-2xs);
  padding: var(--space-s);
  box-shadow: 0 2px 8px hsl(var(--color-hsl) / 0.06);
}

.calendar-month h3 {
  text-align: center;
  font-size: var(--font-size-1);
  margin: 0 0 var(--space-s) 0;
  padding-bottom: var(--space-3xs);
  border-bottom: 1px solid hsl(var(--color-hsl) / 0.1);
}

.calendar-month table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.calendar-month th {
  font-size: var(--font-size-0);
  font-weight: 400;
  color: hsl(var(--color-light-hsl));
  text-align: center;
  padding: var(--space-3xs) 0;
}

.calendar-month td {
  text-align: center;
  padding: var(--space-3xs);
  font-size: var(--font-size-0);
  position: relative;
}

.calendar-month td.free {
  color: hsl(var(--color-free-hsl));
  background: hsl(var(--color-free-hsl) / 0.1);
}

/* Fully booked: both arrive + depart, or continuous stay */
.calendar-month td.booked {
  color: hsl(var(--color-booked-hsl));
  background: hsl(var(--color-booked-hsl) / 0.25);
}

/* Arrive only: bottom-right diagonal (guest arrives in the evening) */
.calendar-month td.arrive {
  color: hsl(var(--color-hsl));
  background: linear-gradient(
    to bottom right,
    hsl(var(--color-free-hsl) / 0.1) 50%,
    hsl(var(--color-booked-hsl) / 0.25) 50%
  );
}

/* Depart only: top-left diagonal (guest leaves in the morning) */
.calendar-month td.depart {
  color: hsl(var(--color-hsl));
  background: linear-gradient(
    to bottom right,
    hsl(var(--color-booked-hsl) / 0.25) 50%,
    hsl(var(--color-free-hsl) / 0.1) 50%
  );
}

.calendar-month td.past {
  color: hsl(var(--color-hsl) / 0.25);
}

.calendar-month td.today {
  font-weight: 600;
  outline: 2px solid hsl(var(--accent-hsl));
  outline-offset: -2px;
}

.calendar-legend {
  display: flex;
  gap: var(--space-m);
  justify-content: center;
  margin-top: var(--space-m);
  font-size: var(--font-size-0);
  color: hsl(var(--color-light-hsl));
}

.calendar-legend span::before {
  content: "";
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  border-radius: 2px;
  margin-right: var(--space-3xs);
  vertical-align: middle;
}

.calendar-legend .legend-free::before {
  background: hsl(var(--color-free-hsl) / 0.4);
}

.calendar-legend .legend-arrive::before {
  background: linear-gradient(
    to bottom right,
    hsl(var(--color-free-hsl) / 0.3) 50%,
    hsl(var(--color-booked-hsl) / 0.4) 50%
  );
}

.calendar-legend .legend-depart::before {
  background: linear-gradient(
    to bottom right,
    hsl(var(--color-booked-hsl) / 0.4) 50%,
    hsl(var(--color-free-hsl) / 0.3) 50%
  );
}

.calendar-legend .legend-booked::before {
  background: hsl(var(--color-booked-hsl) / 0.4);
}

/* ============================================
   Contact Section
   ============================================ */

.contact-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-l);
  margin: var(--space-l) 0;
}

.contact-block {
  padding: var(--space-m);
  background: hsl(var(--color-surface-hsl));
  border-radius: var(--space-2xs);
  border-top: 3px solid hsl(var(--accent-hsl) / 0.5);
  box-shadow: 0 2px 8px hsl(var(--color-hsl) / 0.06);
}

.contact-block h3 {
  margin-top: 0;
  margin-bottom: var(--space-xs);
  font-size: var(--font-size-1);
  color: hsl(var(--accent-hsl));
}

.contact-block p {
  margin-bottom: var(--space-xs);
}

/* ============================================
   Map Embed
   ============================================ */

.map-container {
  margin: var(--space-l) 0;
  border-radius: var(--space-2xs);
  overflow: hidden;
  aspect-ratio: 16/9;
}

.map-container iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* ============================================
   Footer
   ============================================ */

.site-footer {
  grid-column: full-width;
  background: hsl(var(--color-surface-hsl));
  border-top: 1px solid hsl(var(--color-hsl) / 0.08);
  padding: var(--space-l) var(--space-s);
  margin-top: var(--space-2xl);
}

.footer-inner {
  max-width: var(--content-max-width);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-s);
  font-size: var(--font-size-0);
  color: hsl(var(--color-light-hsl));
}

.footer-inner a {
  color: hsl(var(--color-light-hsl));
  border-bottom: none;
}

.footer-inner a:hover {
  color: hsl(var(--accent-hsl));
}

/* ============================================
   Anfahrt / Directions
   ============================================ */

.directions-section {
  margin: var(--space-l) 0;
}

.directions-section h3 {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

/* ============================================
   Lightbox (CSS-only, :target)
   ============================================ */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: hsl(var(--color-background-hsl) / 0.6);
  backdrop-filter: saturate(180%) blur(2rem);
  -webkit-backdrop-filter: saturate(180%) blur(2rem);
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  overscroll-behavior: contain;
  transition: opacity var(--animation-time) ease, visibility var(--animation-time) ease;
}

.lightbox:target {
  opacity: 1;
  visibility: visible;
}

/* Prevent body scroll while lightbox is open */
:has(.lightbox:target) {
  overflow: clip;
}

.lightbox img {
  max-width: 90vw;
  max-height: 85vh;
  border-radius: var(--space-2xs);
  box-shadow: 0 8px 40px hsl(0deg 0% 0% / 0.5);
  object-fit: contain;
}

.lightbox .lightbox-close {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
  border-bottom: none;
}

.lightbox .lightbox-close::after {
  content: "✕";
  position: absolute;
  top: var(--space-m);
  right: var(--space-m);
  font-size: var(--font-size-4);
  color: hsl(var(--color-hsl) / 0.7);
  cursor: pointer;
  line-height: 1;
  transition: color var(--animation-time) ease;
}

.lightbox .lightbox-close:hover::after {
  color: hsl(var(--color-hsl));
}

.lightbox .lightbox-close img {
  cursor: default;
}

/* Make content-image and image-grid clickable */
.content-image a,
.image-grid a {
  display: block;
  border-bottom: none;
}

.content-image a img,
.image-grid a img {
  cursor: zoom-in;
}

@media (prefers-reduced-motion: reduce) {
  .lightbox {
    transition: none;
  }
}

/* ============================================
   Gallery / Image Grid
   ============================================ */

.image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--space-s);
  margin: var(--space-l) 0;
}

.image-grid img {
  border-radius: var(--space-2xs);
  aspect-ratio: 4/3;
  object-fit: cover;
  box-shadow: 0 2px 10px hsl(var(--color-hsl) / 0.08);
  transition: transform var(--animation-time) ease-in-out, box-shadow var(--animation-time) ease-in-out;
}

.image-grid img:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 24px hsl(var(--color-hsl) / 0.12);
}

/* ============================================
   Scroll Fade-In Animations (CSS-only)
   ============================================ */

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(1.5rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Elements that fade in when they enter the viewport */
.content-image,
.info-grid,
.info-card,
.image-grid,
.contact-info,
.calendar-grid,
.highlight-item,
.map-container {
  animation: fadeInUp 0.6s ease-out both;
  animation-timeline: view();
  animation-range: entry 0% entry 30%;
}

/* Stagger children in grids */
.info-card:nth-child(2),
.image-grid img:nth-child(2) {
  animation-delay: 80ms;
}

.info-card:nth-child(3),
.image-grid img:nth-child(3) {
  animation-delay: 160ms;
}

.info-card:nth-child(4) {
  animation-delay: 240ms;
}

/* Respect user preference */
@media (prefers-reduced-motion: reduce) {
  .content-image,
  .info-grid,
  .info-card,
  .image-grid,
  .contact-info,
  .calendar-grid,
  .highlight-item,
  .map-container {
    animation: none;
  }
}