@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat-VariableFont_wght.ttf');
  font-weight: 100 900;
  font-style: normal;
}

@font-face {
  font-family: 'Playfair Display';
  src: url('fonts/PlayfairDisplay-VariableFont_wght.ttf');
  font-weight: 100 900;
  font-style: normal;
}

/* ========== CSS VARIABLES ========== */
:root {
  --bg-dark: #18312e;
  --bg-light: #1f3a36;
  --text-main: #f0ede5;
  --text-grey: #9a9a9a;
  --accent-yellow: #e6b25f;

  /* Font families */
  --font-heading: 'Playfair Display', serif;
  --font-body: 'Montserrat', sans-serif;
}

/* ========== GLOBAL RESET ========== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-body);
  background: var(--bg-dark);
  color: var(--text-main);
  overflow-x: hidden;
  line-height: 1.6;
  /* dok traje preloader */
}

h1,
h3,
h4,
h5,
h6 {
  font-family: var(--font-body);
  font-weight: 500;
}

h2 {
  font-family: var(--font-heading);
  font-weight: 500;
}

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


/* ========== HEADER ========== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 72px;
  display: flex;
  align-items: center;
  z-index: 1000;
  background: var(--bg-dark);
  transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}

.site-header.header--hidden {
  /* Removed transform to keep header sticky */
  transform: none;
}

/* ... existing styles ... */


.header-inner {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 24px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* L - C - R */
}

/* LOGO in Center */
.header-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--text-main);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.9rem;
  /* Ensure it doesn't shrink */
  flex-shrink: 0;
  /* width: 100%;
  height: 100%; */
}

/* Nav Links */
.header-nav ul {
  list-style: none;
  display: flex;
  gap: 24px;
}

/* Ensure Width Balance for Centering */
.header-nav {
  flex: 1;
  /* Both sides take equal space */
  display: flex;
}

.header-nav.nav-left {
  justify-content: flex-start;
}

.header-nav.nav-right {
  justify-content: flex-end;
}

.header-nav a {
  text-decoration: none;
  font-size: 0.9rem;
  color: var(--text-main);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  position: relative;
  padding-bottom: 3px;
}

.header-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 0;
  background: var(--accent-yellow);
  transition: width 0.25s ease;
}

.header-nav a:hover::after {
  width: 100%;
}

/* Mobile – simplified for now */
@media (max-width: 768px) {
  .header-inner {
    padding: 0 16px;
  }

  /* Hide one side or stack them? For now just reduce gap/size */
  .header-nav ul {
    gap: 12px;
  }

  .header-nav a {
    font-size: 0.75rem;
  }
}

/* Malo više prostora gore zbog fiksnog headera */
.page-content {
  padding-top: 0px;
  /* da sadržaj ne ide ispod headera */
}


/* HEADER LOGO IMAGE */
#header-logo-img {
  height: 40px;
  width: auto;
  display: block;
  opacity: 0;
}

/* PRELOADER – Logo Lift + Slide Up Background */
#preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* Background Layer */
.preloader-bg {
  position: absolute;
  inset: 0;
  background: var(--bg-dark);
  /* Slide Up Translation */
  transition: transform 1.2s cubic-bezier(0.7, 0, 0.3, 1);
  z-index: 1;
  transform-origin: top;
}

/* Wrapper to hold logo and line together in center */
.preloader-center-content {
  position: relative;
  /* Relative so checking bounds works usually, but FLIP needs absolute/fixed targets */
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Removed gap so flex doesn't reserve space. We use absolute for line now */
}

/* Logo to animate */
#preloader-logo {
  /* We use relative here initially so it sits nicely with the line,
     but for FLIP we usually calculate positions.
     If we want FLIP to work easily, we might need it fixed or absolute ONLY during transition,
     OR we rely on 'transform' from its current static position.
     Let's keep it static/relative within flex for now, and apply transform. */
  width: auto;
  height: 40px;
  opacity: 0;
  /* Fade in start */
  transition: opacity 0.8s ease;
  /* For the fade in */
  will-change: transform, width, height, opacity;
}

#preloader-logo.fade-in {
  opacity: 1;
}

/* Loading Line - ABSOLUTE to avoid shifting logo center */
.loading-line-container {
  position: absolute;
  top: 100%;
  /* Below the logo */
  margin-top: 16px;
  /* Spacing */
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 2px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
  border-radius: 2px;
}

.loading-line {
  width: 0%;
  height: 100%;
  background: var(--accent-yellow);
  /* Gold */
  transition: width 1.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.loading-line.active {
  width: 100%;
}

/* Hidden state for background */
#preloader.preloader-hidden .preloader-bg {
  /* opacity: 0; <-- Removed default fade */
  transform: translateY(-100%);
  /* Slide UP */
}

/* Hide content wrapper when lifting to clean up the line */
.preloader-center-content.fade-out {
  opacity: 1;
  /* Wrapper stays visible, but we might want to fade out the LINE only. */
}

.loading-line-container.fade-out {
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* GLAVNI SADRŽAJ STRANICE */
.page-content {
  opacity: 0;
  transition: opacity 0.4s ease;
  /* padding: 40px 20px; */
}

.page-content.visible {
  opacity: 1;
}

.page-content h1 {
  font-size: 2.4rem;
  margin-bottom: 0.5rem;
}

.page-content p {
  max-width: 640px;
  color: var(--text-grey);
  line-height: 1.6;
}

@media (min-width: 768px) {
  .welcome-text {
    font-size: 2rem;
  }
}

/* ========== HERO SECTION (3-COLUMN) ========== */

.hero-3col {
  position: relative;
  width: 100%;
  height: 97vh;
  /* Full viewport height */
  display: flex;
  overflow: hidden;
  background: var(--bg-dark);
  gap: 20px;
}

.hero-col {
  position: relative;
  flex: 1;
  /* Equal width columns (33.33%) */
  height: 100%;
  overflow: hidden;
  /* border-right: 1px solid rgba(255, 255, 255, 0.05); */
  /* Subtle divider */
}

.hero-col:last-child {
  border-right: none;
}

/* Media Wrapper to ensure cover fit */
.hero-media-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
}

/* Images and Video */
.hero-img,
.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Optional: filter for mood? */
  filter: brightness(0.6);
  transition: transform 0.8s ease, filter 0.5s ease;
}

/* Hover effects */
.hero-col:hover .hero-img,
.hero-col:hover .hero-video {
  transform: scale(1.13);
  filter: brightness(0.75);
}

.hero-left .hero-caption-btn {
  border: 0;
}

.hero-right .hero-caption-btn {
  border: 0;
}

/* .hero-center {
  padding: 0 10px;
} */


/* Captions at bottom */
.hero-caption {
  position: absolute;
  bottom: 50px;
  left: 0;
  width: 100%;
  padding: 0 20px 40px 20px;
  text-align: center;
  z-index: 20;
  pointer-events: all;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}

.hero-caption h3 {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--text-main);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  /* margin-bottom: 8px; */
  /* h3 always visible */
  opacity: 1;
  transform: translateY(0);
  transition: color 0.3s ease;
  cursor: pointer;
}

.hero-center .hero-caption p {
  font-family: var(--font-heading);
}

/* 
.hero-col:hover .hero-caption h3 {
  color: var(--accent-yellow);
} */

/* Container for p and button - hidden by default */
.hero-caption-hover {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(10px);
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.4s ease,
    transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Show on hover */
.hero-col:hover .hero-caption-hover {
  max-height: 200px;
  opacity: 1;
  transform: translateY(0);
}

.hero-caption-hover p {
  font-size: 0.95rem;
  color: var(--text-main);
  opacity: 0.9;
  font-weight: 300;
  margin-bottom: 16px;
}

.hero-caption-btn {
  display: inline-block;
  padding: 10px 24px;
  background: transparent;
  border: 3px solid var(--accent-yellow);
  color: var(--text-main);
  text-decoration: none;
  /* text-transform: uppercase; */
  font-size: 0.85rem;
  letter-spacing: 0.4em;
  font-weight: 600;
  border-radius: 2px;
  transition: all 0.3s ease;
  pointer-events: all;
}

.hero-caption-btn:hover {
  background: var(--accent-yellow);
  color: #000;
  transform: translateY(-2px);
  /* box-shadow: 0 4px 12px rgba(230, 178, 95, 0.3); */
}

.hero-center .hero-caption {
  bottom: 35%;
}

.hero-caption p {
  font-size: 48px;
  margin: 10px 0 30px 0;
  line-height: 50px;
}


/* Responsive: Stack on mobile */
@media (max-width: 768px) {
  .hero-3col {
    flex-direction: column;
    height: auto;
    min-height: 100vh;
  }

  .hero-col {
    width: 100%;
    height: 60vh;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }

  .hero-col.hero-center {
    height: 40vh;
  }

  .hero-caption {
    bottom: 20px;
  }

  /* On mobile, show the hover content by default since there's no hover */
  .hero-caption-hover {
    max-height: 200px;
    opacity: 1;
    transform: translateY(0);
  }
}

/* ========== ABOUT SECTION ========== */
.about-section {
  position: relative;
  /* Use Light Green for contrast against Dark Green Hero if preferred, 
     or Dark Green base. Let's use Light Green (#214342) as secondary background. */
  background: var(--bg-light);
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 120px 40px 40px 40px;
  overflow: hidden;
}

.about-inner {
  /* max-width: 1200px; */
  /* Increased max-width for wider diagonal feel */
  width: 60%;
  position: relative;
  z-index: 2;
  height: 70%;
  /* User defined height */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* Pushes content away from each other */
  padding: 40px 0;
}

.about-content-top {
  align-self: flex-start;
  /* text-align: left; */
  /* max-width: 1200px; */
  /* Limit width for readability */
  width: 100%;
  padding-bottom: 20px;
}

.about-title,
.h-card-content h3 {
  font-size: 36px;
  letter-spacing: 0.1em;
  color: var(--text-main);
  margin-bottom: 32px;
  opacity: 0.8;
  font-weight: 400;
  line-height: 30px;
}

.about-title span,
.h-card span {
  font-family: var(--font-body);
  font-size: 1rem;
  text-transform: uppercase;
  /* letter-spacing: 0.15em; */
  color: var(--accent-yellow);
  margin-bottom: 32px;
  font-weight: 300;
  opacity: 0.8;
}

.about-text-wrapper {
  overflow: hidden;
  padding: 30px 0;
  width: 85%;
  /* clean edges */
}

.animated-text {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-main);
  font-weight: 300;
  max-width: 100%;
  font-family: var(--font-body);
}

/* Character Animation Classes (Applied by JS) */
.char {
  display: inline-block;
  opacity: 0.1;
  transform: translateY(10px);
  filter: blur(3px);
  /* Fast transition for scroll responsiveness */
  transition: opacity 0.1s linear, transform 0.1s linear, filter 0.1s linear;
  white-space: pre;
  /* Preserve spaces */
}

.char.visible {
  opacity: 1;
  transform: translateY(-20px);
  filter: blur(0);
}

/* Corner Button */
.corner-button {
  /* Removed absolute positioning to use flexbox */
  align-self: flex-end;
  /* Pushes to right */
  margin-bottom: 20px;
  border-top: 1px solid;
  border-color: var(--accent-yellow);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body);
  /* Style */
  background: transparent;
  color: var(--accent-yellow);
  text-decoration: none;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 400;
  padding: 10px 20px;
  z-index: 100;
  transition: transform 0.3s ease, color 0.3s ease;
}

/* Position relative to section, so we need .about-inner or .about-section to handle it.
   If .about-inner is centered, button might look weird if strictly inside it.
   Let's position it absolute to the SECTION for true "corner". */


.corner-button:hover {
  transform: translateX(5px);
  color: #fff;
}

.corner-button svg {
  transition: transform 0.3s ease;
}

.corner-button:hover svg {
  transform: translateX(5px);
}

/* ========== VERTICAL SCROLL SECTION ========== */
.hori-scroll-section {
  position: relative;
  height: 350vh;
  /* Scroll space (100vh per card = 5 cards) */
  background: var(--bg-dark);
}

.sticky-wrapper {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/* Background Layer */
.h-bg-layer {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.h-bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* opacity: 0;
  transition: opacity 1s ease;
  filter: brightness(0.4); */
}

.h-bg-image.active {
  opacity: 1;
}

/* Fixed Title Block */
.h-fixed-content {
  position: absolute;
  top: 100px;
  left: 40px;
  z-index: 10;
  max-width: 300px;
}

.h-fixed-content h2 {
  font-size: 1.5rem;
  color: var(--accent-yellow);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 8px;
}

.h-fixed-content p {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.7);
}

/* Right Side Indexer */
.card-indexer {
  position: absolute;
  right: 50px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 15;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.indexer-item {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.indexer-item.active {
  opacity: 1;
}

.indexer-label {
  font-size: 0.9rem;
  color: var(--text-main);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.4;
  white-space: nowrap;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  font-family: var(--font-body);
}

.indexer-item.active .indexer-label,
.indexer-item:hover .indexer-label {
  opacity: 1;
}

.indexer-line {
  height: 2px;
  background: var(--accent-yellow);
  width: 30px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.indexer-item.active .indexer-line {
  width: 60px;
}

.indexer-item:hover .indexer-line {
  background: #fff;
}

/* Vertical Card Track */
.card-track {
  display: flex;
  flex-direction: column;
  height: 95vh;
  /* 5 cards * 100vh */
  width: 100%;
  will-change: transform;
  padding: 100px 40px;
}

.h-card {
  width: 100%;
  height: 85vh;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.h-card-content {
  width: 60%;
  max-width: 60%;
  text-align: left;
  padding: 40px 0;
}

/* .h-card-content h3 {
  font-size: 3rem;
  color: var(--accent-yellow);
  text-transform: uppercase;
  margin-bottom: 20px;
} */

.h-card-content p {
  font-size: 1.2rem;
  color: #fff;
  opacity: 0.9;
  margin-bottom: 40px;
  width: 85%;
}

.card-btn {
  display: inline-block;
  padding: 15px 40px;
  border: 1px solid var(--accent-yellow);
  color: var(--accent-yellow);
  text-transform: uppercase;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.1em;
  transition: all 0.3s ease;
}

.card-btn:hover {
  background: var(--accent-yellow);
  color: #000;
}


/* ========== SECTION DIVIDERS (Pseudo-elements) ========== */
/* Add vertical line after ALL sections without taking layout space */

/* Default divider for all sections */
section::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -50px;
  transform: translateX(-50%);
  width: 2px;
  background: #e6b25f75;
  height: 0;
  transition: height 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 100;
  pointer-events: none;
}

/* Special positioning for video gallery section */
.video-gallery-section::after {
  bottom: -100px;
}

/* Active state - set via JavaScript - applies to ALL sections */
section.divider-active::after {
  height: 100px;
  z-index: 1000;
}


/* ========== MASONRY GALLERY SECTION ========== */
.masonry-gallery-section {
  position: relative;
  min-height: 100vh;
  background: var(--bg-light);
  padding: 100px 40px;
}

.masonry-container {
  max-width: 1400px;
  margin: 0 auto;
}

.masonry-header {
  margin-bottom: 20px;
  text-align: left;
}

.masonry-header h2 {
  margin-bottom: 20px;
}

.masonry-header p {
  font-size: 1.1rem;
  color: var(--text-grey);
  max-width: 600px;
}

.masonry-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  align-items: start;
}

.masonry-item {
  position: relative;
  cursor: pointer;
  overflow: visible;
}

.masonry-item:nth-child(1) {
  grid-row: span 1;
}

.masonry-item:nth-child(2) {
  grid-row: span 2;
  margin-top: 60px;
}

.masonry-item:nth-child(3) {
  grid-row: span 1;
  margin-top: 30px;
}

.masonry-img-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 4/5;
  overflow: hidden;
  border: 1px solid rgba(230, 178, 95, 0.2);
  transition: border-color 0.3s ease;
}

.masonry-item:hover .masonry-img-wrapper {
  border-color: var(--accent-yellow);
}

.masonry-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease, filter 0.3s ease;
  filter: brightness(0.7);
}

.masonry-item:hover .masonry-img-wrapper img {
  transform: scale(1.05);
  filter: brightness(0.85);
}

/* Hover Line SVG */
.hover-line {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.masonry-item:hover .hover-line {
  opacity: 1;
}

.line-path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  transition: stroke-dashoffset 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.masonry-item:hover .line-path {
  stroke-dashoffset: 0;
}

/* Meal Descriptions */
.meal-descriptions {
  position: absolute;
  bottom: 0;
  right: -20%;
  width: 350px;
  padding: 30px;
  background: rgba(24, 49, 46, 0.95);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(230, 178, 95, 0.3);
}

.meal-desc {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  display: none;
}

.meal-desc.active {
  opacity: 1;
  transform: translateY(0);
  display: block;
}

.meal-desc h3 {
  font-size: 1.5rem;
  color: var(--accent-yellow);
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.meal-desc p {
  font-size: 1rem;
  color: var(--text-main);
  line-height: 1.6;
  opacity: 0.9;
}

/* Responsive */
@media (max-width: 1024px) {
  .masonry-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .masonry-item:nth-child(2) {
    margin-top: 0;
  }

  .meal-descriptions {
    position: static;
    width: 100%;
    margin-top: 40px;
  }
}

@media (max-width: 768px) {
  .masonry-grid {
    grid-template-columns: 1fr;
  }

  .masonry-item:nth-child(1),
  .masonry-item:nth-child(2),
  .masonry-item:nth-child(3) {
    margin-top: 0;
    grid-row: span 1;
  }
}

/* ========== VIDEO ZOOM GALLERY SECTION ========== */
.video-gallery-section {
  position: relative;
  height: 400vh;
  background: var(--bg-dark);
  color: #fff;
}

.gallery-sticky-wrapper {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Central Video Container */
.vg-video-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: center center;
  will-change: transform;
}

.vg-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Images Grid Container */
.vg-images {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
  /* Behind video initially, but around it */
  pointer-events: none;

  /* Use Grid for easy positioning */
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  padding: 20px;
  gap: 20px;
}

.vg-img {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  opacity: 0;
  /* Hidden initially */
  transform: scale(1.5);
  /* Zoomed in initially */
  will-change: transform, opacity;
  border-radius: 8px;
}

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

/* Grid Positioning (Skipping Center 5) */
.pos-1 {
  grid-area: 1 / 1 / 2 / 2;
}

/* Top Left */
.pos-2 {
  grid-area: 1 / 2 / 2 / 3;
}

/* Top Center */
.pos-3 {
  grid-area: 1 / 3 / 2 / 4;
}

/* Top Right */

.pos-4 {
  grid-area: 2 / 1 / 3 / 2;
}

/* Mid Left */
/* skip center */
.pos-5 {
  grid-area: 2 / 3 / 3 / 4;
}

/* Mid Right */

.pos-6 {
  grid-area: 3 / 1 / 4 / 2;
}

/* Bottom Left */
.pos-7 {
  grid-area: 3 / 2 / 4 / 3;
}

/* Bottom Center */
.pos-8 {
  grid-area: 3 / 3 / 4 / 4;
}

/* Bottom Right */

/* ========== MENU SECTION (Caffe) ========== */
.menu-section {
  background: var(--bg-dark);
  /* Keep theme consistent */
  padding: 80px 40px;
  min-height: 60vh;
}

.menu-container {
  max-width: 800px;
  margin: 0 auto;
}

.menu-title {
  text-align: center;
  font-size: 3rem;
  color: var(--accent-yellow);
  text-transform: uppercase;
  margin-bottom: 60px;
  letter-spacing: 0.1em;
}

.menu-list {
  display: flex;
  flex-direction: column;
}

.menu-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 10px;
}

.menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 10px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.menu-header:hover {
  background: rgba(255, 255, 255, 0.05);
}

.item-name {
  font-size: 1.4rem;
  color: #fff;
  font-weight: 500;
  letter-spacing: 0.05em;
  transition: color 0.3s ease;
}

.menu-item.active .item-name {
  color: var(--accent-yellow);
}

.item-price {
  font-size: 1.2rem;
  color: var(--accent-yellow);
  font-weight: 600;
}

/* Accordion Details */
.menu-details {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.details-inner {
  padding: 20px 10px 40px;
  display: flex;
  gap: 24px;
  align-items: center;
}

.item-thumb {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid var(--accent-yellow);
  flex-shrink: 0;
}

.item-info {
  flex: 1;
}

.item-info p {
  color: #ccc;
  font-size: 1rem;
  line-height: 1.5;
  margin-bottom: 8px;
}

.item-extra {
  font-size: 0.9rem;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* ========== MEALS MASONRY GALLERY SECTION ========== */
.meals-gallery-section {
  position: relative;
  min-height: 120vh;
  background: var(--bg-dark);
  padding: 100px 40px;
}

.meals-container {
  max-width: 1100px;
  margin: 0 auto;
}

.meals-header {
  margin-bottom: 20px;
  text-align: left;
  width: 65%;
}

.meals-header h2 {
  margin-bottom: 20px;
}

.meals-header p {
  font-size: 16px;
  color: var(--text-main);
  /* max-width: 600px; */
}

/* Masonry Grid */
.meals-masonry {
  display: grid;
  /* grid-template-columns: repeat(3, 1fr); */
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(5, 1fr);
  gap: 40px;
  position: relative;
  margin-top: -140px;
}

/* Individual Meal Item */
.meal-item {
  position: relative;
  cursor: pointer;
  overflow: visible;
}

.meal-image-wrapper {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
  border-radius: 4px;
}

.meal-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), filter 0.3s ease;
  filter: brightness(0.7);
}

.meal-item:hover .meal-img {
  /* transform: scale(1.05); */
  filter: brightness(0.5);
}

/* Meal Info - Hidden by default, shown on hover */
.meal-info {
  position: absolute;
  /* bottom: -120px; */
  /* left: 45%; */
  /* transform: translateX(-50%); */
  width: 90%;
  /* background: rgba(24, 49, 46, 0.98); */
  /* backdrop-filter: blur(10px); */
  /* border: 1px solid rgba(230, 178, 95, 0.4); */
  padding: 25px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease, bottom 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 10;
  top: 420px
}

.meal-item:hover .meal-info {
  opacity: 1;
  bottom: -140px;
  pointer-events: all;
}

.meal-name {
  font-size: 1.3rem;
  color: var(--accent-yellow);
  margin-bottom: 15px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  margin-left: 20px;
}

/* Animated Line - Vertical connection from image to info box */
.meal-line {
  position: absolute;
  top: -25px;
  /* left: 50%; */
  /* transform: translateX(-50%); */
  width: 2px;
  height: 0;
  background-color: #e6b25f75;
  transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.meal-item:hover .meal-line {
  height: 170px;
}

.meal-description {
  font-size: 0.95rem;
  color: var(--text-main);
  line-height: 1.6;
  opacity: 0.9;
  margin-bottom: 15px;
  margin-left: 20px;
}

.meal-price {
  display: inline-block;
  font-size: 1.1rem;
  color: var(--accent-yellow);
  font-weight: 600;
  padding-top: 10px;
  border-top: 1px solid rgba(230, 178, 95, 0.3);
  width: 100%;
  margin-left: 20px;
}

/* Responsive */
@media (max-width: 1024px) {
  .meals-masonry {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }
}

@media (max-width: 768px) {
  .meals-masonry {
    grid-template-columns: 1fr;
    gap: 60px;
  }

  .meal-image-wrapper {
    height: 300px;
  }

  .meal-item:hover .meal-info {
    bottom: -150px;
  }
}

/* ========== CAFFE CENTERED HERO SECTION ========== */
.hero-caffe-centered {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(rgba(24, 49, 46, 0.7), rgba(24, 49, 46, 0.7)),
    url('assets/boomerang_restoran.webp') center/cover no-repeat;
  /* background-attachment: fixed; */
  padding: 100px 40px;
  text-align: center;
  height: 50vh;
}

.hero-caffe-content {
  max-width: 900px;
  margin: 0 auto;
  animation: fadeInUp 1s ease-out;
}

.hero-caffe-title {
  font-size: 2.5rem;
  color: var(--accent-yellow);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: 30px;
  font-weight: 700;
  text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
}

.hero-caffe-description {
  font-size: 1.3rem;
  color: var(--text-main);
  line-height: 1.8;
  opacity: 0.95;
  max-width: 700px;
  margin: 0 auto;
  text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

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

/* Responsive */
@media (max-width: 1024px) {
  .hero-caffe-title {
    font-size: 3.5rem;
  }

  .hero-caffe-description {
    font-size: 1.2rem;
  }
}

@media (max-width: 768px) {
  .hero-caffe-centered {
    min-height: 80vh;
    padding: 80px 20px;
  }

  .hero-caffe-title {
    font-size: 2.5rem;
    letter-spacing: 0.1em;
  }

  .hero-caffe-description {
    font-size: 1.1rem;
    line-height: 1.6;
  }
}

/* ========== KNOWLEDGE SECTION (O NAMA PAGE) ========== */
.knowledge-section {
  position: relative;
  min-height: 100vh;
  background: var(--bg-dark);
  padding: 100px 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Background Decorative Image */
.knowledge-bg-image {
  position: absolute;
  bottom: 0%;
  left: 0%;
  /* transform: translateY(-50%); */
  width: 300px;
  height: auto;
  opacity: 0.15;
  z-index: 1;
  pointer-events: none;
  object-fit: cover;
  filter: grayscale(50%);
}

.knowledge-container {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 50% 50%;
  width: 1100px;
  align-items: center;
}

/* Image Column */
.knowledge-image-col {
  position: relative;
  height: 100%;
}

.knowledge-img {
  width: 70%;
  height: auto;
  max-height: 500px;
  object-fit: cover;
  border-radius: 4px;
  filter: brightness(0.85);
  transition: filter 0.3s ease;
}

.knowledge-img:hover {
  filter: brightness(1);
}

/* Text Column */
.knowledge-text-col {
  position: relative;
  padding-left: 40px;
}

/* Decorative vertical line on the left */
.knowledge-paragraph1:before {
  content: '';
  position: absolute;
  left: 0;
  top: 150px;
  width: 1px;
  height: 25%;
  background: var(--accent-yellow);
  opacity: 0.6;
}

.knowledge-text-inner {
  max-width: 600px;
}

.knowledge-title {
  font-size: 2rem;
  color: var(--text-main);
  line-height: 1;
  margin-bottom: 40px;
  font-weight: 400;
  letter-spacing: 0.1em;
  margin-left: -20%;
  font-family: var(--font-heading);
}

.knowledge-paragraph,
.knowledge-paragraph1 {
  font-size: 0.9rem;
  color: var(--text-main);
  line-height: 1.8;
  margin-bottom: 25px;
  opacity: 0.9;
  font-family: var(--font-body);
  width: 70%;
  font-weight: 400;
}

.knowledge-paragraph:last-child {
  margin-bottom: 0;
}

/* Responsive */
@media (max-width: 1024px) {
  .knowledge-container {
    grid-template-columns: 45% 55%;
    gap: 50px;
  }

  .knowledge-text-col {
    padding-left: 30px;
  }

  .knowledge-title {
    font-size: 1.8rem;
  }
}

@media (max-width: 768px) {
  .knowledge-section {
    padding: 80px 20px;
  }

  .knowledge-container {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .knowledge-text-col {
    padding-left: 25px;
  }

  .knowledge-title {
    font-size: 1.6rem;
    margin-bottom: 25px;
  }

  .knowledge-paragraph {
    font-size: 0.95rem;
  }
}

/* ========== CONCEPT SECTION (O NAMA PAGE) ========== */
.concept-section {
  position: relative;
  min-height: 100vh;
  background: var(--bg-dark);
  padding: 100px 40px;
  display: block;
}

.concept-section h3 {
  text-align: center;
  color: var(--text-main);
  padding-top: 50px;
  font-size: 3rem;
  margin-top: 100px;
  letter-spacing: 0.1em;
  font-family: var(--font-heading);
  font-weight: 700;
}

.concept-container {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 60% 40%;
  gap: 80px;
  align-items: center;
  width: 1100px;
}

/* Text Column - Now on Left */
.concept-text-col {
  position: relative;
  padding-right: 40px;
}

.concept-text-inner {
  max-width: 600px;
}

.concept-title {
  font-size: 2rem;
  color: var(--text-main);
  line-height: 1.4;
  margin-bottom: 30px;
  font-weight: 400;
  letter-spacing: 0.02em;
  font-family: var(--font-heading);
}

.concept-paragraph {
  font-size: 0.9rem;
  color: var(--text-main);
  line-height: 1.8;
  margin-bottom: 50px;
  opacity: 0.9;
  padding: 30px 20px;
  margin-left: 50px;
  font-family: var(--font-body);
  font-weight: 400;
}

.concept-list::before {
  content: '';
  position: absolute;
  left: 0;
  top: 30%;
  width: 1px;
  height: 25%;
  background: var(--accent-yellow);
}

/* Services List with Lines */
.concept-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-left: 100px;
}

.concept-list-item {
  display: flex;
  align-items: center;
  gap: 20px;
}

.concept-line {
  width: 120px;
  height: 1px;
  background: var(--accent-yellow);
  transition: width 0.3s ease;
}

.concept-list-item:hover .concept-line {
  width: 180px;
}

.concept-item-text {
  font-size: 0.9rem;
  color: var(--text-main);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-weight: 400;
  font-family: var(--font-body);
}

/* Image Column - Now on Right */
.concept-image-col {
  position: relative;
  height: 100%;
}

.concept-img {
  width: 100%;
  height: auto;
  max-height: 500px;
  object-fit: cover;
  border-radius: 4px;
  filter: brightness(0.85);
  transition: filter 0.3s ease;
}

.concept-img:hover {
  filter: brightness(1);
}

/* Responsive */
@media (max-width: 1024px) {
  .concept-container {
    grid-template-columns: 55% 45%;
    gap: 50px;
  }

  .concept-text-col {
    padding-right: 30px;
  }

  .concept-title {
    font-size: 1.8rem;
  }
}

@media (max-width: 768px) {
  .concept-section {
    padding: 80px 20px;
  }

  .concept-container {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .concept-text-col {
    padding-right: 0;
  }

  .concept-title {
    font-size: 1.6rem;
    margin-bottom: 20px;
  }

  .concept-paragraph {
    font-size: 0.95rem;
    margin-bottom: 35px;
  }

  .concept-line {
    width: 50px;
  }

  .concept-item-text {
    font-size: 0.9rem;
  }
}

/* ========== CLOSING SECTION (O NAMA PAGE) ========== */
.closing-section {
  position: relative;
  min-height: 60vh;
  background: var(--bg-dark);
  padding: 100px 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.closing-container {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.closing-paragraph {
  font-size: 0.9rem;
  color: var(--text-main);
  line-height: 1.4;
  margin-bottom: 40px;
  opacity: 0.95;
  letter-spacing: 0.09em;
  font-family: var(--font-body);
  font-weight: 300;
}

.closing-paragraph:last-child {
  margin-bottom: 0;
}

/* Responsive */
@media (max-width: 768px) {
  .closing-section {
    padding: 80px 20px;
    min-height: 50vh;
  }

  .closing-paragraph {
    font-size: 1.05rem;
    line-height: 1.75;
    margin-bottom: 30px;
  }
}

/* ========== FOOTER SECTION ========== */
.site-footer {
  position: relative;
  background: var(--bg-dark);
  /* #18312e */
  color: var(--text-main);
  padding: 110px 40px 30px;
  text-align: center;

}

.footer-inner {
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}

/* Footer Logo */
.footer-logo {
  width: 300px;
  height: auto;
  margin-bottom: 20px;
  opacity: 0.95;
}

/* Footer Brand Column - Centered */
.footer-col.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.footer-desc {
  font-size: 0.95rem;
  color: var(--text-grey);
  opacity: 0.7;
  max-width: 400px;
  line-height: 1.6;
  display: none;
  /* Hidden to match reference */
}

/* Footer Contact Column */
.footer-col.footer-contact {
  width: 100%;
}

.footer-col.footer-contact h4 {
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-main);
  margin-bottom: 20px;
  font-weight: 500;
}

.footer-col.footer-contact p {
  font-size: 0.95rem;
  color: var(--text-main);
  margin-bottom: 8px;
  line-height: 1.8;
}

.footer-col.footer-contact a {
  color: var(--accent-yellow);
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.footer-col.footer-contact a:hover {
  opacity: 0.8;
}

/* Footer Hours Column */
.footer-col.footer-hours {
  width: 100%;
  display: none;
  /* Hidden to match reference which shows hours in contact */
}

.footer-col.footer-hours h4 {
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-main);
  margin-bottom: 20px;
  font-weight: 500;
}

.footer-col.footer-hours p {
  font-size: 0.95rem;
  color: var(--text-main);
  margin-bottom: 8px;
  line-height: 1.8;
}

/* Footer Links/Social Column */
.footer-col.footer-links {
  width: 100%;
}

.footer-col.footer-links h4 {
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-main);
  margin-bottom: 20px;
  font-weight: 500;
  display: none;
  /* Hide heading to match reference */
}

.social-links {
  display: flex;
  gap: 20px;
  justify-content: center;
  align-items: center;
}

.social-links a {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--bg-dark);
  font-size: 1.3rem;
  font-weight: 600;
  transition: transform 0.3s ease, background 0.3s ease;
  position: relative;
  overflow: hidden;
}

/* Facebook and Instagram icons using text */
.social-links a::before {
  content: '\f55a';
  font-family: "Font Awesome 5 Free";
  font-style: italic;
  font-weight: bold;
}

.social-links a:nth-child(2)::before {
  content: '';
  width: 24px;
  height: 24px;
  background: var(--bg-dark);
  border: 2px solid var(--bg-dark);
  border-radius: 8px;
  position: relative;
}

.social-links a:nth-child(2)::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  background: #fff;
  border: 2px solid var(--bg-dark);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.social-links a:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.9);
}

/* Footer Bottom */
.footer-bottom {
  /* margin-top: 50px; */
  padding-top: 25px;
  border-top: 1px solid rgba(230, 178, 95, 0.2);
  text-align: center;
  margin: 30px auto;
  width: 80%;
}

.footer-bottom p {
  font-size: 0.85rem;
  color: var(--text-grey);
  opacity: 0.6;
  letter-spacing: 0.05em;
}

/* Responsive */
@media (max-width: 768px) {
  .site-footer {
    padding: 60px 20px 20px;
  }

  .footer-logo {
    width: 140px;
  }

  .footer-inner {
    gap: 25px;
  }

  .social-links a {
    width: 45px;
    height: 45px;
    font-size: 1.1rem;
  }
}