/*
============================================
  Panorama Theme for Revela
  Designed for Ferienwohnung Alpenstraße 8

  - 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%;
  }

  .site-banner {
    background: hsl(var(--color-surface-hsl));
  }
}

@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 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);
}

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

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: 33%;
  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;
}

table {
  width: 100%;
  max-width: 480px;
  border-collapse: collapse;
  margin: var(--space-l) 0;
}

th {
  text-align: left;
  font-weight: 400;
  font-size: var(--font-size-0);
  color: hsl(var(--color-light-hsl));
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: var(--space-xs) 0;
  border-bottom: 2px solid hsl(var(--accent-hsl) / 0.3);
}

td {
  padding: var(--space-s) 0;
  border-bottom: 1px solid hsl(var(--color-hsl) / 0.08);
}

td:last-child,
th:last-child {
  text-align: right;
}

tr:last-child td {
  border-bottom: none;
}

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 (Home page only)
   ============================================ */

.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;
}

/* ============================================
   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 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: separate;
  border-spacing: 1px;
  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);
  border-radius: 3px;
  position: relative;
}

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

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

.calendar-month td.arrive {
  color: hsl(var(--color-hsl));
  background: linear-gradient(to bottom right,
      hsl(var(--color-free-hsl) / 0.25) 50%,
      hsl(var(--color-booked-hsl) / 0.45) 50%);
}

.calendar-month td.depart {
  color: hsl(var(--color-hsl));
  background: linear-gradient(to bottom right,
      hsl(var(--color-booked-hsl) / 0.45) 50%,
      hsl(var(--color-free-hsl) / 0.25) 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;
  flex-wrap: wrap;
  gap: var(--space-s) var(--space-m);
  justify-content: center;
  margin-top: var(--space-m);
  font-size: var(--font-size-0);
  color: hsl(var(--color-light-hsl));
  margin-bottom: var(--space-l);
}

.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.6);
}

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

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

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

/* ============================================
   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);
}

/* ── CTA Button ── */

.cta-button {
  display: inline-block;
  margin-top: var(--space-m);
  padding: var(--space-s) var(--space-l);
  background: hsl(var(--accent-hsl));
  color: #fff;
  border: none;
  border-bottom: none;
  border-radius: var(--space-2xs);
  font-size: var(--font-size-1);
  font-weight: 400;
  letter-spacing: 0.02em;
  transition: background var(--animation-time) ease-in-out;
}

.cta-button:hover {
  background: hsl(var(--accent-light-hsl));
  color: #fff;
  border-bottom: none;
}

/* ============================================
   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));
}

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

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

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.content-image,
.contact-info,
.calendar-grid,
.map-container {
  animation: fadeInUp 0.6s ease-out both;
  animation-timeline: view();
  animation-range: entry 0% entry 30%;
}

@media (prefers-reduced-motion: reduce) {

  .content-image,
  .contact-info,
  .calendar-grid,
  .map-container {
    animation: none;
  }
}

/* ============================================
   Gallery (flex flow with proportional sizing)
   ============================================ */
.gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 2rem;

  >article {
    flex-grow: calc(var(--width) * (500000000 / var(--height)));
    flex-basis: calc(10rem * (var(--width) / var(--height)));
    position: relative;
    cursor: zoom-in;
    overflow: hidden;
    border-radius: 0.25rem;

    >picture {
      aspect-ratio: var(--width) / calc(var(--height) * 2);
      margin-bottom: max(-100% / (var(--width) / var(--height)), max(-100dvh, var(--height) * -1px));
    }

    img {
      max-width: 100%;
      max-height: 100vh;
      height: auto;
      object-fit: contain;
      display: block;
      position: sticky;
      top: 0;
    }

    /* --- Lightbox (CSS-only, focus-based) --- */
    figure {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 300;
      justify-content: center;
      align-items: center;
      background: rgba(0, 0, 0, 0.92);
      backdrop-filter: blur(1rem);
      cursor: default;
      opacity: 0;
      transition: opacity 0.3s, display 0.3s allow-discrete;

      >a {
        position: fixed;
        inset: 0;
        display: block;
        text-indent: -9999px;
        cursor: zoom-out;
        z-index: 310;

        &::after {
          content: "×";
          position: fixed;
          top: 0.5rem;
          right: 1rem;
          font-size: 2.5rem;
          font-weight: 100;
          color: #fff;
          text-indent: 0;
          cursor: pointer;
          z-index: 320;
        }
      }

      img {
        position: relative;
        z-index: 315;
        max-width: 95dvw;
        max-height: 90dvh;
        width: auto;
        height: auto;
        object-fit: contain;
        box-shadow: 0 0 3rem rgba(0, 0, 0, 0.5);
      }
    }

    &:focus,
    &:target {
      figure {
        display: flex;
        opacity: 1;

        @starting-style {
          opacity: 0;
        }
      }
    }
  }
}