/* ============================================
 Ubud Valley Resort — Complete Service Styles
 v3.1 – Updated for 50/50 Modal Layout
 -------------------------------------------- */

:root {
 --brand-primary: #557949;
 --brand-secondary: #c6a15b;
 --bg-primary: #000;
 --bg-secondary: #111;
 --text-primary: #fff;
 --text-secondary: #ccc;
 --transition-fast: 0.2s ease;
 --transition-normal: 0.3s ease;
 --transition-slow: 0.5s ease;
 --shadow-light: rgba(255, 255, 255, 0.1);
 --shadow-dark: rgba(0, 0, 0, 0.65);
 --border-radius-sm: 6px;
 --border-radius-md: 8px;
 --border-radius-lg: 32px;
 --border-radius-full: 9999px;
 --spacing-xs: 0.5rem;
 --spacing-sm: 1rem;
 --spacing-md: 1.5rem;
 --spacing-lg: 2rem;
 --spacing-xl: 3rem;
}

/* make sizing include padding and borders */
*, *::before, *::after {
  box-sizing: border-box;
}

/* ================================================
 ACCESSIBILITY & SCREEN READER UTILITIES
 ================================================ */
.sr-only {
 position: absolute !important;
 width: 1px !important;
 height: 1px !important;
 padding: 0 !important;
 margin: -1px !important;
 overflow: hidden !important;
 clip: rect(0, 0, 0, 0) !important;
 white-space: nowrap !important;
 border: 0 !important;
}

.skip-link {
 position: absolute;
 top: -40px;
 left: 6px;
 background: var(--brand-primary);
 color: var(--text-primary);
 padding: 8px;
 text-decoration: none;
 z-index: 100000;
 border-radius: var(--border-radius-sm);
}

.skip-link:focus {
 top: 6px;
}

/* ================================================
 BODY/HTML MODAL LOCK
 ================================================ */
html.modal-open,
body.modal-open {
 height: 100vh !important;
 overflow: hidden !important;
 width: 100vw !important;
 overscroll-behavior: none;
 touch-action: none;
}

body.modal-open #header-outer,
body.modal-open #search-outer,
body.modal-open .nectar-mobile-only,
body.modal-open .slide-out-widget-area-toggle,
body.modal-open #slide-out-widget-area {
 opacity: 0 !important;
 pointer-events: none !important;
 transition: opacity 0.3s ease;
 display: none !important;
}

/* ================================================
 SERVICE GRID WRAPPER
 ================================================ */
.ubud-service-grid-wrapper {
 width: 100%;
 overflow: hidden;
 max-width: 1200px;
 margin: 0 auto;
 padding: 0 var(--spacing-md);
}

/* ================================================
 FILTER BUTTONS
 ================================================ */
.grid-filters {
 display: flex;
 justify-content: center;
 flex-wrap: wrap;
 gap: var(--spacing-xs);
 margin-bottom: var(--spacing-lg);
 padding: var(--spacing-sm);
 background: rgba(255, 255, 255, 0.05);
 border-radius: var(--border-radius-lg);
 backdrop-filter: blur(10px);
}

.filter-btn {
 background: none;
 border: 1px solid transparent;
 color: var(--text-secondary);
 padding: var(--spacing-xs) var(--spacing-md);
 border-radius: var(--border-radius-lg);
 cursor: pointer;
 font-family: "Inter", sans-serif;
 font-size: 0.875rem;
 font-weight: 500;
 text-transform: uppercase;
 letter-spacing: 0.05em;
 transition: all var(--transition-normal);
 position: relative;
 overflow: hidden;
}

.filter-btn::before {
 content: "";
 position: absolute;
 top: 0;
 left: -100%;
 width: 100%;
 height: 100%;
 background: linear-gradient(
  90deg,
  transparent,
  rgba(255, 255, 255, 0.1),
  transparent
 );
 transition: left var(--transition-slow);
}

.filter-btn:hover::before {
 left: 100%;
}

.filter-btn:hover,
.filter-btn:focus {
 color: var(--brand-secondary);
 border-color: var(--brand-secondary);
 transform: translateY(-2px);
 box-shadow: 0 4px 12px rgba(198, 161, 91, 0.3);
}

.filter-btn.active {
 background: var(--brand-secondary);
 color: var(--bg-primary);
 border-color: var(--brand-secondary);
 font-weight: 600;
}

.filter-btn:focus-visible {
 outline: 2px solid var(--brand-secondary);
 outline-offset: 2px;
}

/* ================================================
 SERVICE GRID
 ================================================ */
.service-grid {
 display: grid;
 gap: var(--spacing-lg);
 margin-bottom: var(--spacing-xl);
}

.ubud-service-grid-wrapper[data-columns="2"] .service-grid {
 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.ubud-service-grid-wrapper[data-columns="3"] .service-grid {
 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.ubud-service-grid-wrapper[data-columns="4"] .service-grid {
 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

@media (max-width: 768px) {
 .service-grid {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
  gap: var(--spacing-md);
 }
}

@media (max-width: 480px) {
 .service-grid {
  grid-template-columns: 1fr !important;
  gap: var(--spacing-sm);
 }
}

/* ================================================
 SERVICE ITEMS & CARDS
 ================================================ */
.service-item {
 opacity: 1;
 transform: scale(1);
 transition: all var(--transition-normal);
 min-width: 0;
 min-height: 0;
}

.service-item.isotope-hidden {
 opacity: 0;
 transform: scale(0.9);
 pointer-events: none;
}

.card {
 background: var(--bg-secondary);
 border-radius: var(--border-radius-md);
 overflow: hidden;
 transition: all var(--transition-normal);
 border: 1px solid rgba(255, 255, 255, 0.1);
 height: 100%;
 display: flex;
 flex-direction: column;
}

.card:hover {
 transform: translateY(-8px);
 box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
 border-color: var(--brand-secondary);
}

/* ================================================
 CARD IMAGE
 ================================================ */
.card-image {
  position: relative;
  aspect-ratio: 16/11;
  overflow: hidden;
  cursor: pointer;
  background: var(--bg-secondary);
  display: flex;
  width: 100%;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
}

.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transition: transform var(--transition-slow);
}

.card:hover .card-image img {
 transform: scale(1.1);
}

.card-overlay {
 position: absolute;
 inset: 0;
 background: linear-gradient(
  135deg,
  rgba(85, 121, 73, 0.8) 0%,
  rgba(198, 161, 91, 0.8) 100%
 );
 display: flex;
 align-items: center;
 justify-content: center;
 opacity: 0;
 transition: opacity var(--transition-normal);
}

.card-image:hover .card-overlay,
.card-image:focus .card-overlay {
 opacity: 1;
}

.view-details {
 color: var(--text-primary);
 font-family: "Inter", sans-serif;
 font-weight: 600;
 text-transform: uppercase;
 letter-spacing: 0.1em;
 background: rgba(0, 0, 0, 0.2);
 padding: var(--spacing-xs) var(--spacing-md);
 border-radius: var(--border-radius-lg);
 backdrop-filter: blur(5px);
}

.card-image:focus-visible {
 outline: 2px solid var(--brand-secondary);
 outline-offset: 2px;
}

/* ================================================
 CARD CONTENT
 ================================================ */
.card-content {
 padding: var(--spacing-md);
 flex-grow: 1;
 display: flex;
 flex-direction: column;
}

.card-title {
 font-family: "Cinzel", serif;
 font-size: 1.25rem;
 font-weight: 600;
 color: var(--text-primary);
 margin: 0 0 var(--spacing-xs) 0;
 line-height: 1.3;
 display: -webkit-box;
 -webkit-line-clamp: 2;
 -webkit-box-orient: vertical;
 overflow: hidden;
}

.card-excerpt {
 font-family: "Inter", sans-serif;
 color: var(--text-secondary);
 font-size: 0.875rem;
 line-height: 1.6;
 margin: 0 0 var(--spacing-md) 0;
 flex-grow: 1;
 display: -webkit-box;
 -webkit-line-clamp: 3;
 -webkit-box-orient: vertical;
 overflow: hidden;
}

/* ================================================
 BUTTONS
 ================================================ */
.btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 padding: var(--spacing-xs) var(--spacing-md);
 border-radius: var(--border-radius-lg);
 font-family: "Inter", sans-serif;
 font-size: 0.875rem;
 font-weight: 600;
 text-transform: uppercase;
 letter-spacing: 0.05em;
 text-decoration: none;
 cursor: pointer;
 transition: all var(--transition-normal);
 border: 2px solid;
 position: relative;
 overflow: hidden;
 margin-top: auto; /* Push button to bottom of card content */
}

.btn::before {
 content: "";
 position: absolute;
 top: 0;
 left: -100%;
 width: 100%;
 height: 100%;
 background: linear-gradient(
  90deg,
  transparent,
  rgba(255, 255, 255, 0.2),
  transparent
 );
 transition: left var(--transition-slow);
}

.btn:hover::before {
 left: 100%;
}

.btn-outline {
 background: transparent;
 color: var(--brand-secondary);
 border-color: var(--brand-secondary);
}

.btn-outline:hover,
.btn-outline:focus {
 background: var(--brand-secondary);
 color: var(--bg-primary);
 transform: translateY(-2px);
 box-shadow: 0 8px 25px rgba(198, 161, 91, 0.4);
}

.btn:focus-visible {
 outline: 2px solid var(--brand-secondary);
 outline-offset: 2px;
}

/* ================================================
 MODAL STYLES (UPDATED FOR 50/50 LAYOUT)
 ================================================ */
.service-modal[hidden] {
 display: none !important;
}

.service-modal {
 z-index: 10000;
 position: fixed;
 inset: 0;
 width: 100vw;
 height: 100vh;
 display: flex;
 align-items: center;
 justify-content: center;
 color: var(--text-primary);
 opacity: 0;
 visibility: hidden;
 transition: opacity var(--transition-normal), visibility var(--transition-normal);
 padding: var(--spacing-sm);
}

.service-modal.is-open {
 opacity: 1;
 visibility: visible;
}

.modal-overlay {
 z-index: 9999;
 position: fixed;
 inset: 0;
 background: var(--shadow-dark);
 backdrop-filter: blur(6px);
 cursor: pointer;
}

/* --- MODAL ARTICLE: Main layout container --- */
.modal-article {
 z-index: 10001;
 position: relative;
 width: 100%;
 max-width: 95vw;
 height: 90vh;
 background: var(--bg-primary);
 border-radius: var(--border-radius-md);
 overflow: hidden;
 font-family: "Inter", sans-serif;
 display: flex;
 flex-direction: column; /* Mobile-first: stacked layout */
 transform: scale(0.95);
 transition: transform var(--transition-normal);
}

.service-modal.is-open .modal-article {
 transform: scale(1);
}

/* Desktop layout: 50/50 split */
@media (min-width: 1024px) {
 .modal-article {
  flex-direction: row; /* Side-by-side layout */
  max-width: 1400px;
  /* Using clamp for responsive height between two values */
  height: clamp(600px, 85vh, 800px);
 }
}


/* ================================================
 MODAL MEDIA (IMAGE/GALLERY - 50%)
 ================================================ */
.modal-media {
 position: relative;
 background: var(--bg-secondary);
 overflow: hidden;
 flex-shrink: 0;
 /* Mobile: takes a portion of the height */
 width: 100%;
 height: 40%;
}

.modal-media img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: center center;
}

.slide {
 position: absolute;
 inset: 0;
 opacity: 0;
 transition: opacity var(--transition-slow);
}

.slide.is-active {
 opacity: 1;
}

/* Desktop layout: 50% width */
@media (min-width: 1024px) {
 .modal-media {
  flex: 0 0 50%; /* Strict 50% width, no grow, no shrink */
  height: 100%; /* Full height of the article */
 }
}

/* ================================================
 MODAL BODY (CONTENT - 50%)
 ================================================ */
.modal-body {
 padding: var(--spacing-lg);
 overflow-y: auto;
 overscroll-behavior: contain;
 position: relative;
 flex-grow: 1; /* Mobile: takes remaining space */
 display: flex; /* CRITICAL: enable flex layout for content */
 flex-direction: column; /* Stack header, content, and footer vertically */
 min-height: 0; /* Fix for flexbox overflow bug */
}

/* Custom scrollbar styling */
.modal-body::-webkit-scrollbar {
 width: 8px;
}
.modal-body::-webkit-scrollbar-track {
 background: rgba(255, 255, 255, 0.1);
}
.modal-body::-webkit-scrollbar-thumb {
 background: var(--brand-secondary);
 border-radius: 4px;
}
.modal-body::-webkit-scrollbar-thumb:hover {
 background: #d4b366;
}

/* Desktop layout: 50% width */
@media (min-width: 1024px) {
 .modal-body {
  flex: 0 0 50%; /* Strict 50% width, no grow, no shrink */
  height: 100%;
  padding: var(--spacing-xl);
 }
}

.modal-body .counter {
 color: var(--brand-primary);
 opacity: 0.7;
 font-size: 0.875rem;
 font-weight: 500;
 text-transform: uppercase;
 letter-spacing: 0.1em;
 flex-shrink: 0; /* Prevent counter from shrinking */
}

.modal-title {
 font-family: "Cinzel", serif;
 font-size: clamp(1.75rem, 5vw, 2.5rem); /* Responsive font size */
 font-weight: 600;
 line-height: 1.2;
 margin: var(--spacing-xs) 0 var(--spacing-md) 0;
 color: var(--text-primary);
 flex-shrink: 0; /* Prevent title from shrinking */
}

.modal-text {
 font-size: 1rem;
 line-height: 1.7;
 color: var(--text-secondary);
 flex-grow: 1; /* CRITICAL: Allows this area to expand, pushing footer down */
 margin-bottom: var(--spacing-lg); /* Space above the footer */
}

.modal-text p {
 margin-bottom: 1em;
}

.modal-text > *:last-child {
 margin-bottom: 0;
}

/* ================================================
 MODAL FOOTER
 ================================================ */
.modal-footer {
 margin-top: auto; /* Pushed to bottom by .modal-text flex-grow */
 padding-top: var(--spacing-lg);
 display: flex;
 flex-wrap: wrap;
 gap: var(--spacing-sm);
 align-items: center;
 border-top: 1px solid rgba(255, 255, 255, 0.1);
 flex-shrink: 0; /* Prevent footer from shrinking */
}


/* ================================================
 MODAL CONTROLS (Close, Nav Arrows)
 ================================================ */
.modal-close {
 position: absolute;
 top: var(--spacing-md);
 right: var(--spacing-md);
 width: 44px;
 height: 44px;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 1.75rem;
 border-radius: 50%;
 background: rgba(0, 0, 0, 0.4);
 backdrop-filter: blur(4px);
 color: var(--text-primary);
 border: 0;
 cursor: pointer;
 z-index: 10002; /* Above article */
 transition: all var(--transition-normal);
}

.modal-close:hover,
.modal-close:focus-visible {
 background: rgba(255, 255, 255, 0.3);
 transform: scale(1.1) rotate(90deg);
}
.modal-close:focus-visible {
 outline: 2px solid var(--brand-secondary);
 outline-offset: 2px;
}

.modal-post-nav {
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 width: calc(100% - 2rem);
 left: 1rem;
 display: flex;
 justify-content: space-between;
 z-index: 10002;
 pointer-events: none; /* Let clicks pass through the container */
}

.post-nav-prev,
.post-nav-next {
 pointer-events: auto; /* Re-enable pointer events on buttons */
 display: flex;
 align-items: center;
 justify-content: center;
 width: 44px;
 height: 44px;
 background: rgba(0, 0, 0, 0.4);
 backdrop-filter: blur(4px);
 color: white;
 border: 1px solid transparent;
 border-radius: 50%;
 cursor: pointer;
 font-size: 1.5rem;
 transition: all var(--transition-normal);
}

.post-nav-prev:hover,
.post-nav-next:hover,
.post-nav-prev:focus-visible,
.post-nav-next:focus-visible {
 background: var(--brand-secondary);
 color: var(--bg-primary);
 transform: scale(1.1);
}

.post-nav-prev:disabled,
.post-nav-next:disabled {
 opacity: 0.3;
 cursor: not-allowed;
 transform: none;
 background: rgba(0, 0, 0, 0.4);
}

/* ================================================
 IMAGE GALLERY NAVIGATION
 ================================================ */
.slide-nav {
 position: absolute;
 bottom: var(--spacing-md);
 left: 50%;
 transform: translateX(-50%);
 display: flex;
 align-items: center;
 gap: 0.75rem;
 z-index: 5;
 background: rgba(0,0,0,0.3);
 padding: var(--spacing-xs);
 border-radius: var(--border-radius-full);
 backdrop-filter: blur(5px);
}

.slide-nav .prev, .slide-nav .next {
 width: 32px;
 height: 32px;
 border: 1px solid rgba(255, 255, 255, 0.2);
 background: rgba(0, 0, 0, 0.2);
 color: var(--text-primary);
 display: flex;
 align-items: center;
 justify-content: center;
 border-radius: 50%;
 cursor: pointer;
 font-size: 1.25rem;
 transition: all var(--transition-normal);
}

.slide-nav .prev:hover, .slide-nav .next:hover {
 border-color: var(--brand-secondary);
 background: var(--brand-secondary);
 color: var(--bg-primary);
}

.slide-nav ul {
 display: flex;
 gap: 0.5rem;
 list-style: none;
 margin: 0;
 padding: 0;
}

.slide-nav li {
 width: 10px;
 height: 10px;
 background: var(--text-primary);
 border-radius: 50%;
 opacity: 0.5;
 cursor: pointer;
 transition: all var(--transition-normal);
}

.slide-nav li.active, .slide-nav li:hover {
 opacity: 1;
 transform: scale(1.2);
 background: var(--brand-secondary);
}

/* ================================================
 MODAL FOOTER BUTTONS & FOOTER NAVIGATION
 ================================================ */
.btn-book {
 padding: 0.75rem var(--spacing-lg);
 border-radius: var(--border-radius-lg);
 background: var(--brand-primary);
 color: var(--text-primary);
 border: 2px solid var(--brand-primary);
 font-family: "Inter", sans-serif;
 font-weight: 600;
 text-transform: uppercase;
 letter-spacing: 0.03em;
 text-decoration: none;
 transition: all var(--transition-normal);
}

.btn-book:hover,
.btn-book:focus {
 background: transparent;
 color: var(--brand-primary);
 transform: translateY(-2px);
 box-shadow: 0 8px 25px rgba(85, 121, 73, 0.4);
}
.btn-book:focus-visible {
 outline: 2px solid var(--brand-primary);
}

.btn-terms {
 background: none;
 border: none;
 color: var(--text-primary);
 font-size: 0.875rem;
 text-decoration: underline;
 opacity: 0.7;
 cursor: pointer;
 transition: opacity var(--transition-normal);
}
.btn-terms:hover, .btn-terms:focus {
 opacity: 1;
 color: var(--brand-secondary);
}
.btn-terms:focus-visible {
 outline: 2px solid var(--brand-secondary);
}

.modal-slider-footer {
 background: var(--bg-secondary);
 padding: var(--spacing-sm) var(--spacing-lg);
 border-top: 1px solid rgba(255, 255, 255, 0.1);
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 1rem;
 z-index: 100;
 flex-shrink: 0;
}

.slider-counter {
 font-size: 0.875rem;
 font-weight: 500;
 color: var(--text-secondary);
 white-space: nowrap;
}
.current-post {
 color: var(--text-primary);
 font-weight: 600;
}

.slider-dots {
 display: flex;
 align-items: center;
 gap: 0.5rem;
 flex-wrap: wrap;
 justify-content: center;
}

.slider-dot {
 width: 0.75rem;
 height: 0.75rem;
 border-radius: 50%;
 border: 2px solid var(--text-secondary);
 background: transparent;
 cursor: pointer;
 transition: all var(--transition-normal);
 padding: 0;
}

.slider-dot.active, .slider-dot:hover {
 border-color: var(--brand-secondary);
 background: var(--brand-secondary);
}

/* ================================================
 UTILITIES & MISC
 ================================================ */
.no-services-found {
 text-align: center;
 color: var(--text-secondary);
 font-style: italic;
 padding: var(--spacing-xl);
 background: rgba(255, 255, 255, 0.05);
 border-radius: var(--border-radius-md);
}

/* Hide post nav when only one item */
.modal-article[data-total="1"] .modal-post-nav,
.modal-article[data-total="1"] .modal-slider-footer {
 display: none;
}

@media (prefers-reduced-motion: reduce) {
 *, *::before, *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
 }
}

/* Hide nav arrows on mobile to avoid content overlap */
@media (max-width: 768px) {
  .post-nav-prev,
  .post-nav-next {
    display: none !important;
  }
}

/* ================================================
   FLEX LAYOUT OVERRIDE FOR SERVICE GRID
   ================================================ */

/* FLEX LAYOUT OVERRIDE FOR SERVICE GRID */

.service-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

.service-grid.columns-2 .service-item {
  width: calc(50% - 30px);
}

.service-grid.columns-3 .service-item {
  width: calc(33.333% - 30px);
}

.service-grid.columns-4 .service-item {
  width: calc(25% - 30px);
}

.service-item {
  margin: 15px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}


/* Responsive adjustments */
@media (max-width: 768px) {
  .service-grid.columns-2 .service-item,
  .service-grid.columns-3 .service-item,
  .service-grid.columns-4 .service-item {
    width: calc(50% - 30px);
    margin: 0px;
    margin-bottom: 15px;
  }
}

@media (max-width: 480px) {
  .service-item {
    width: 100% !important;
  }
}