/* Global reset and base */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { overflow-x: hidden; }
body { font-family: 'Roboto Mono', monospace; background: #ffefe6; color: #1b1b1b; line-height: 1.6; }
img, svg, video { max-width: 100%; height: auto; display: block; }

/* Layout containers */
.container { max-width: 1350px; margin: 0 auto; padding: 0 64px 40px; }

/* Navbar (from homepage) */
.navbar { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; position: -webkit-sticky; position: sticky; top: 0; z-index: 100; background: #ffefe6; }
.logo-container { display: flex; align-items: center; position: relative; width: 160px; height: 74.53px; }
.navbar-button { display: flex; align-items: center; gap: 16px; background: #8e141f; color: white; padding: 0 16px; height: 54px; border-radius: 4px; font-size: 16px; text-decoration: none; transition: background 0.2s; }
.navbar-button.desktop-only { display: none; }
.navbar-button:hover { background: #a01620; }
/* Navbar slots default (mobile/tablet) */
.navbar { position: relative; }
.navbar-left { order: 3; display:flex; align-items:center; gap:16px; }
.navbar-center { order: 1; display:flex; align-items:center; }
.navbar-right { order: 2; display:flex; align-items:center; gap:16px; }

/* Language switcher (from homepage) */
.lang-switch { position: relative; background: #fff; border-radius: 4px; padding: 12px 14px; display: inline-flex; align-items: center; gap: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); cursor: pointer; user-select: none; }
.lang-switch .lang-menu { position: absolute; top: calc(100% + 6px); left: 0; background: #fff; border: 1px solid #e6e6e6; border-radius: 4px; box-shadow: 0 8px 20px rgba(0,0,0,0.12); padding: 6px 0; list-style: none; min-width: 140px; z-index: 20; }
.lang-switch .lang-menu li { padding: 8px 12px; cursor: pointer; }
.lang-switch .lang-menu li:hover { background: #f5f5f5; }

/* Buttons (from homepage) */
.btn-primary, .btn-secondary { height: 54px; border-radius: 4px; font-size: 16px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.btn-primary { background: #8e141f; color: #fff; border: none; }
.btn-secondary { background: #fff; color: #121212; border: 1px solid #000; }
.btn-secondary:hover { background: #f5f5f5; color: #121212; border-color: #000; }

/* Footer (from homepage) */
.footer { border-top: 1px solid #1b1b1b; padding: 115px 0; }
.footer-content { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 68px; }
.footer-links, .footer-info { display: flex; flex-direction: column; gap: 16px; font-family: 'Roboto Mono', monospace; font-weight: 300; font-size: 20px; line-height: 1.6; }
.footer-links a, .footer-info a { color: #1b1b1b; text-decoration: none; font-weight: 300; }
.footer-links a:visited, .footer-info a:visited { color: #1b1b1b; }
.footer-links a:hover, .footer-info a:hover { color: #8e141f; }

/* Fixed mobile CTA base (from homepage) */
.mobile-cta-fixed { position: fixed; left: 16px; right: 16px; bottom: 16px; background: #8e141f; color: #fff; border-radius: 6px; height: 56px; display: none; align-items: center; justify-content: center; text-decoration: none; font-family: 'Roboto Mono', monospace; font-size: 18px; box-shadow: 0 10px 30px rgba(142,20,31,0.35); z-index: 50; }

/* Homepage headings and hero */
.heading-section { max-width: 1222px; margin: 40px 0; position: relative; overflow: hidden; }
.main-title { font-family: 'Monument Extended', 'Roboto Mono', sans-serif; font-weight: 900; font-size: 45px; line-height: 1.3; text-transform: uppercase; margin-bottom: 32px; }
.main-title .highlight { color: #8e141f; }
.description { font-weight: 300; font-size: 20px; line-height: 1.6; margin-bottom: 0; }
.description strong { font-weight: 500; }
.description .link { color: #8e141f; text-decoration: underline; }

/* Guide card */
.guide-card { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 12px; gap: 40px; margin: 0 auto 12px; max-width: 600px; }
.guide-card > div { box-shadow: 0px 16px 250px -4px rgba(142, 20, 31, 0.2), 0px 4px 4px -4px rgba(12, 12, 13, 0.05); overflow: hidden; width: 100%; line-height: 0; }

/* Tabs */
.tabs-zone { display: flex; flex-wrap: wrap; justify-content: center; margin-bottom: 40px; }
.tab-item { width: 140px; display: flex; flex-direction: column; gap: 1px; cursor: pointer; }
.tab-label { font-size: 20px; text-align: center; height: 39px; display: flex; align-items: center; justify-content: center; font-weight: 300; }
.tab-indicator { height: 4px; background: #ffffff; }
.tab-item.active .tab-indicator { background: #1b1b1b; }
.tab-item.active .tab-label { font-weight: 700; }

/* Cards list */
.cards-wrapper { display: flex; flex-wrap: wrap; gap: 32px; max-width: 1222px; margin-bottom: 40px; transition: opacity 320ms ease, transform 320ms ease; }
.cards-wrapper.fade-out { opacity: 0; transform: translateY(10px); }
.cards-wrapper.fade-in { opacity: 1; transform: translateY(0); }
.restaurant-card { flex: 1 0 320px; min-width: 320px; background: white; border-radius: 4px; overflow: hidden; }
.card-image { position: relative; height: 240px; overflow: hidden; }
.card-img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 1; transition: opacity 220ms ease; }
.image-slider { position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); pointer-events: none; z-index: 5; }
.slider-button { pointer-events: auto; position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.6); width: 48px; height: 48px; border-radius: 50%; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(0,0,0,0.25); }
.slider-button.prev { left: 8px; }
.slider-button.next { right: 8px; }
.chevron-icon { width: 20px; height: 20px; display: block; fill: none; }
.slider-button.prev .chevron-icon { transform: rotate(180deg); }
.cards-wrapper .btn-primary { display: inline-flex; }
.card-content { padding: 24px; display: flex; flex-direction: column; gap: 24px; }
.card-title { font-weight: 700; font-size: 20px; line-height: 1.3; }
.card-description { font-weight: 300; font-size: 18px; line-height: 1.3; }
.card-buttons { display: flex; flex-direction: column; gap: 8px; }

/* Details page: shared styles */
.details-title { font-family: 'Monument Extended', 'Roboto Mono', sans-serif; font-weight: 900; font-size: 45px; line-height: 1.3; text-transform: uppercase; margin: 24px 0; }
.description { font-weight: 300; font-size: 20px; line-height: 1.6; margin: 20px 0; }
/* Aliases for existing details markup */
.page-title { font-family: 'Monument Extended', 'Roboto Mono', sans-serif; font-weight: 900; font-size: 45px; line-height: 1.3; text-transform: uppercase; margin: 24px 0; }
.desc { font-weight: 300; font-size: 20px; line-height: 1.6; margin: 20px 0; }
/* Details blocks spacing */
.section { margin-top: 80px; }
/* Temporarily hide BnB block without deleting markup */
#section-bnb { display: none; }
/* Details: make buttons full-width only on details pages */
.section .btn-primary, .section .btn-secondary { width: 100%; }

/* Details mosaic gallery: full-width with square thumbnails */
.mosaic-wrapper { width: 100%; }
.details-mosaic { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0 8px; }
.details-left, .details-cell { border-radius: 6px; overflow: hidden; background: #fff; border: 1px solid #1b1b1b; }
.details-left { aspect-ratio: 1 / 1; }
.details-left img { width: 100%; height: 100%; object-fit: cover; }
.details-right { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; align-content: start; }
.details-cell { aspect-ratio: 1 / 1; }
.details-cell img { width: 100%; height: 100%; object-fit: cover; }
/* Aliases mapping current HTML classes */
.mosaic { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0 8px; }
.mosaic-left, .mosaic-cell { border-radius: 6px; overflow: hidden; background: #fff; border: 1px solid #1b1b1b; }
.mosaic-left { aspect-ratio: 1 / 1; }
.mosaic-left img { width: 100%; height: 100%; object-fit: cover; }
.mosaic-right { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; align-content: start; }
.mosaic-cell { aspect-ratio: 1 / 1; }
.mosaic-cell img { width: 100%; height: 100%; object-fit: cover; }

/* BnB section */
.bnb-section { margin-top: 32px; }
.bnb-title { font-weight: 700; font-size: 24px; margin-bottom: 12px; }
.bnb-grid { display: grid; grid-template-columns: 678px 1fr; gap: 16px; }
.bnb-main { width: 100%; height: 452px; border-radius: 6px; overflow: hidden; border: 1px solid #1b1b1b; background: #fff; }
.bnb-main img { width: 100%; height: 100%; object-fit: cover; }
.bnb-right { display: grid; grid-template-rows: auto auto; gap: 12px; }
.bnb-row { display: grid; grid-template-columns: 330px 1fr; gap: 12px; }
.bnb-mask { border-radius: 6px; overflow: hidden; border: 1px solid #1b1b1b; background: #fff; }
.bnb-mask img { width: 100%; height: 100%; object-fit: cover; }
.bnb-panel { border: 1px solid #1b1b1b; background: #fff; border-radius: 6px; padding: 16px; }
.bnb-panel p { font-size: 16px; font-weight: 300; line-height: 28px; margin-bottom: 12px; }
.bnb-panel h3 { font-family: 'Monument Extended', 'Roboto Mono', sans-serif; font-weight: 900; font-size: 28px; line-height: 1.2; text-transform: uppercase; margin-bottom: 8px; }
.bnb-panel .bnb-subtitle { font-family: 'Roboto Mono', monospace; font-weight: 500; font-size: 20px; line-height: 1.6; color: #1b1b1b; margin-bottom: 8px; }

/* Responsive */
@media (min-width: 1025px){
  /* Desktop: lang left, logo centered, CTA right */
  .navbar { justify-content: space-between; position:relative; }
  .navbar .navbar-right{ position:static; right:auto; top:auto; transform:none; display:flex; gap:16px; }
  .navbar-left{ order:1; }
  .navbar-right{ order:3; }
  .navbar-center{ position:absolute; left:50%; transform:translateX(-50%); order:2; }
  .navbar .lang-switch{ position:static; left:auto; top:auto; transform:none; }
  .heading-section, .description { text-align: left; }
  .navbar-button.desktop-only{ display:inline-flex; }
}
@media (max-width: 1024px){
  .footer-content{ justify-content:center; text-align:center; }
  .footer-links, .footer-info{ align-items:center; font-size:18px; }
}
@media (max-width: 900px){
  .mosaic-wrapper{ width: 100%; }
  .details-mosaic{ grid-template-columns: 1fr; }
  .details-left{ aspect-ratio: auto; }
  .mosaic{ grid-template-columns: 1fr; }
  .mosaic-left{ aspect-ratio: auto; }
  .details-right, .mosaic-right{ grid-template-columns: 1fr 1fr; }
  .bnb-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 768px){
  .container{ padding: 0 24px 40px; }
  .details-title{ font-size: 32px; }
  .page-title{ font-size: 32px; }
  .description{ font-size: 16px; }
  .mobile-cta-fixed{ display: flex; }
  body{ padding-bottom: 84px; }
  .footer{ padding: 56px 0 72px; }
  .footer-content{ gap: 32px; }
  .footer-links, .footer-info{ font-size: 16px; }
}