/* Katucs Vendégház – Shared Styles */

/* Highlighter mark */
.price-highlight {
  background: linear-gradient(transparent 40%, #fde68a 40%);
  color: inherit;
  padding: 0 2px;
}

/* Material Symbols */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}

/* Smooth scrolling */
html { scroll-behavior: smooth; }

/* ── Navigation ────────────────────────────────────────────── */
.nav-link {
  font-size: 14px;
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #434840;
  text-decoration: none;
  transition: color 0.3s;
  padding-bottom: 4px;
}
.nav-link:hover { color: #0a1e08; }
.nav-link.active {
  color: #0a1e08;
  border-bottom: 2px solid #0a1e08;
}

/* Mobile menu */
#mobile-menu {
  display: none;
  flex-direction: column;
  gap: 4px;
  background: #fbf9f5;
  border-top: 1px solid rgba(196,200,190,0.4);
  padding: 16px 24px;
}
#mobile-menu.open { display: flex; }
#mobile-menu a {
  font-size: 14px;
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #434840;
  text-decoration: none;
  padding: 10px 0;
  border-bottom: 1px solid rgba(196,200,190,0.3);
}
#mobile-menu a:last-child { border-bottom: none; }
#mobile-menu a.active { color: #0a1e08; }

/* ── Hero sections ─────────────────────────────────────────── */
.hero-overlay { background: linear-gradient(to bottom, rgba(10,30,8,0.35) 0%, rgba(10,30,8,0.55) 100%); }

/* ── Feature icon cards ────────────────────────────────────── */
.feature-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px 12px;
  background: #ffffff;
  border: 1px solid rgba(196,200,190,0.5);
  border-radius: 4px;
  text-align: center;
  transition: box-shadow 0.3s, border-color 0.3s;
}
.feature-card:hover {
  box-shadow: 0 8px 24px rgba(10,30,8,0.08);
  border-color: #c4c8be;
}

/* ── Gallery grid ───────────────────────────────────────────── */
.masonry-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.masonry-item {
  position: relative;
  overflow: hidden;
  border-radius: 2px;
  cursor: pointer;
  aspect-ratio: 4/3;
}
.masonry-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease, filter 0.3s ease;
  filter: grayscale(15%);
}
.masonry-item:hover img {
  transform: scale(1.05);
  filter: grayscale(0%);
}
.masonry-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10,30,8,0);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s;
}
.masonry-item:hover .masonry-overlay { background: rgba(10,30,8,0.25); }
.masonry-overlay .material-symbols-outlined {
  color: white;
  font-size: 32px;
  opacity: 0;
  transition: opacity 0.3s;
}
.masonry-item:hover .masonry-overlay .material-symbols-outlined { opacity: 1; }

@media (max-width: 900px) { .masonry-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .masonry-grid { grid-template-columns: 1fr; } }

/* ── Lightbox ──────────────────────────────────────────────── */
#lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(10,30,8,0.92);
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#lightbox.open { display: flex; }
#lightbox-img {
  max-width: 95vw;
  max-height: 85vh;
  object-fit: contain;
  border-radius: 2px;
  box-shadow: 0 32px 80px rgba(0,0,0,0.5);
}
#lightbox-caption {
  color: #f2f1ec;
  font-family: 'Manrope', sans-serif;
  font-size: 14px;
  margin-top: 12px;
  letter-spacing: 0.03em;
}
.lightbox-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(251,249,245,0.12);
  border: 1px solid rgba(251,249,245,0.2);
  color: #f2f1ec;
  border-radius: 4px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
}
.lightbox-btn:hover { background: rgba(251,249,245,0.25); }
#lightbox-prev { left: 16px; }
#lightbox-next { right: 16px; }
#lightbox-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: rgba(251,249,245,0.12);
  border: 1px solid rgba(251,249,245,0.2);
  color: #f2f1ec;
  border-radius: 4px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
}
#lightbox-close:hover { background: rgba(251,249,245,0.25); }

/* Thumbnail strip */
#lightbox-thumbs {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  overflow-x: auto;
  max-width: 90vw;
  padding-bottom: 4px;
}
#lightbox-thumbs::-webkit-scrollbar { height: 4px; }
#lightbox-thumbs::-webkit-scrollbar-thumb { background: rgba(251,249,245,0.3); border-radius: 2px; }
.lightbox-thumb {
  width: 64px;
  height: 48px;
  object-fit: cover;
  border-radius: 2px;
  cursor: pointer;
  opacity: 0.55;
  border: 2px solid transparent;
  transition: opacity 0.2s, border-color 0.2s;
  flex-shrink: 0;
}
.lightbox-thumb:hover { opacity: 0.85; }
.lightbox-thumb.active { opacity: 1; border-color: #b5ceab; }

/* ── Gallery filter bar ────────────────────────────────────── */
.filter-btn {
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 8px 16px;
  border-radius: 4px;
  border: 1px solid rgba(196,200,190,0.5);
  background: transparent;
  color: #434840;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.filter-btn:hover { border-color: #0a1e08; color: #0a1e08; }
.filter-btn.active {
  background: #1f331b;
  border-color: #1f331b;
  color: #ffffff;
}

/* ── Calendar ──────────────────────────────────────────────── */
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.cal-day-name {
  font-family: 'Manrope', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-align: center;
  color: #747870;
  text-transform: uppercase;
  padding: 6px 0;
}
.cal-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  user-select: none;
}
.cal-day:hover:not(.past):not(.empty) { background: #dce6d4; }
.cal-day.past { color: #c4c8be; cursor: default; }
.cal-day.empty { cursor: default; }
.cal-day.booked { background: #efeee9; color: #c4c8be; cursor: not-allowed; text-decoration: line-through; }
.cal-day.selected { background: #1f331b; color: #ffffff; }
.cal-day.in-range { background: #d1eac6; color: #0a1e08; }
.cal-day.range-start, .cal-day.range-end { background: #0a1e08; color: #ffffff; }

/* ── Pricing cards ─────────────────────────────────────────── */
.price-card {
  background: #ffffff;
  border: 1px solid rgba(196,200,190,0.5);
  border-radius: 4px;
  padding: 32px 24px;
  transition: box-shadow 0.3s, transform 0.3s;
}
.price-card:hover {
  box-shadow: 0 12px 40px rgba(10,30,8,0.1);
  transform: translateY(-4px);
}
.price-card.featured {
  background: #1f331b;
  border-color: #1f331b;
  color: #f2f1ec;
  transform: scale(1.04);
}
.price-card.featured:hover { transform: scale(1.04) translateY(-4px); }

/* ── Floor plan diagram ────────────────────────────────────── */
.floorplan-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}
.floorplan-room {
  background: #f5f4ef;
  border: 1px solid #c4c8be;
  border-radius: 2px;
  padding: 16px 12px;
  text-align: center;
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #434840;
}
.floorplan-room.wide { grid-column: span 2; }
.floorplan-room.full { grid-column: span 3; }

/* ── Buttons ───────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #1f331b;
  color: #ffffff;
  font-family: 'Manrope', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 14px 28px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s, box-shadow 0.2s, transform 0.1s;
}
.btn-primary:hover { background: #0a1e08; box-shadow: 0 8px 24px rgba(10,30,8,0.25); }
.btn-primary:active { transform: scale(0.97); }

.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: #1f331b;
  font-family: 'Manrope', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 13px 28px;
  border-radius: 8px;
  border: 1.5px solid #1f331b;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s, color 0.2s, transform 0.1s;
}
.btn-outline:hover { background: #1f331b; color: #ffffff; }
.btn-outline:active { transform: scale(0.97); }

.btn-outline-light {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: #f2f1ec;
  font-family: 'Manrope', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 13px 28px;
  border-radius: 8px;
  border: 1.5px solid rgba(242,241,236,0.6);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s, transform 0.1s;
}
.btn-outline-light:hover { background: rgba(242,241,236,0.15); border-color: #f2f1ec; }
.btn-outline-light:active { transform: scale(0.97); }

/* ── Map embed ─────────────────────────────────────────────── */
.map-embed {
  width: 100%;
  height: 320px;
  border: none;
  border-radius: 4px;
  filter: grayscale(20%);
}

/* ── Section label chip ────────────────────────────────────── */
.section-label {
  display: inline-block;
  font-family: 'Manrope', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #586154;
  border: 1px solid #c1c9bb;
  padding: 4px 12px;
  border-radius: 4px;
  margin-bottom: 16px;
}

/* ── Info contact cards ────────────────────────────────────── */
.contact-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: #f5f4ef;
  border: 1px solid rgba(196,200,190,0.5);
  border-radius: 4px;
  padding: 20px;
}
.contact-card .icon-wrap {
  background: #dce6d4;
  border-radius: 4px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #1f331b;
}

/* ── Footer ────────────────────────────────────────────────── */
footer {
  background: #efeee9;
  color: #434840;
  border-top: 1px solid #c4c8be;
}
footer a { color: #586154; text-decoration: none; transition: color 0.2s; }
footer a:hover { color: #0a1e08; }
.footer-heading {
  font-family: 'Manrope', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #0a1e08;
  margin-bottom: 16px;
}
.footer-link {
  display: block;
  font-family: 'Manrope', sans-serif;
  font-size: 14px;
  color: #586154;
  text-decoration: none;
  padding: 3px 0;
  transition: color 0.2s;
}
.footer-link:hover { color: #0a1e08; }

/* ── Nav logo badge ────────────────────────────────────────── */
.logo-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 48px;
  border: 1.5px solid #0a1e08;
  border-radius: 50%;
  padding: 4px;
  text-decoration: none;
  flex-shrink: 0;
  transition: opacity 0.2s;
}
.logo-badge:hover { opacity: 0.7; }
.logo-katucs {
  font-family: 'Playfair Display', serif;
  font-size: 12px;
  font-weight: 600;
  font-style: italic;
  color: #0a1e08;
  letter-spacing: 0.01em;
  line-height: 1;
  text-align: center;
}

/* ── Attraction cards ──────────────────────────────────────── */
.attraction-card {
  background: #ffffff;
  border: 1px solid rgba(196,200,190,0.5);
  border-radius: 4px;
  overflow: hidden;
  transition: box-shadow 0.3s, transform 0.3s;
}
.attraction-card:hover {
  box-shadow: 0 12px 40px rgba(10,30,8,0.1);
  transform: translateY(-4px);
}

/* ── Form inputs ───────────────────────────────────────────── */
.form-input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1.5px solid #c4c8be;
  padding: 10px 0;
  font-family: 'Manrope', sans-serif;
  font-size: 16px;
  color: #1b1c1a;
  outline: none;
  transition: border-color 0.2s;
}
.form-input:focus { border-color: #1f331b; }
.form-input::placeholder { color: #747870; }
.form-label {
  display: block;
  font-family: 'Manrope', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #586154;
  margin-bottom: 4px;
}
textarea.form-input { resize: vertical; min-height: 100px; }
select.form-input { cursor: pointer; }

/* ── Utility ───────────────────────────────────────────────── */
.container { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.section-gap { padding: 80px 0; }
.section-gap-sm { padding: 48px 0; }

/* ── Mobile responsive ─────────────────────────────────────── */
html, body { overflow-x: hidden; }

@media (max-width: 767px) {
  /* Scale down large display headings (56px → 32px) */
  .text-display-lg {
    font-size: 2rem !important;
    line-height: 1.2 !important;
    letter-spacing: -0.01em !important;
  }
  /* Scale down section headings (40px → 26px) */
  .text-headline-xl {
    font-size: 1.625rem !important;
    line-height: 1.25 !important;
  }
}