/* ----------------------  packages.html ---------------------------    */
/* DESIGN PRINCIPLES: Negative Space Implementation */

/* ==========================================================================
   CONFERENCES PAGE - CSS Variables & Fluid Typography
   Implements: DESIGN-PRINCIPLES-NEGATIVE-SPACE.md
   ========================================================================== */

#pkgConference {
  /* Page-level spacing variables following 8px base unit */
  --conf-space-xs: 4px;
  --conf-space-sm: 8px;
  --conf-space-md: 12px;
  --conf-space-base: 16px;
  --conf-space-lg: 20px;
  --conf-space-xl: 24px;
  --conf-space-2xl: 32px;
  --conf-space-3xl: 40px;
  --conf-space-4xl: 48px;

  /* Fluid Typography - clamp(min, preferred, max) */
  --conf-font-h1: clamp(1.75rem, 4vw + 0.5rem, 2.5rem);
  --conf-font-h2: clamp(1.25rem, 2.5vw + 0.5rem, 1.75rem);
  --conf-font-h4: clamp(1rem, 1.5vw + 0.5rem, 1.25rem);
  --conf-font-body: clamp(0.875rem, 1vw + 0.25rem, 1rem);
  --conf-font-small: clamp(0.75rem, 0.8vw + 0.25rem, 0.875rem);
  --conf-font-table: clamp(0.7rem, 0.9vw + 0.2rem, 0.875rem);

  /* Line heights for readability */
  --conf-line-height-tight: 1.4;
  --conf-line-height-normal: 1.6;
  --conf-line-height-relaxed: 1.75;

  /* Colors */
  --conf-color-primary: rgb(1, 75, 66);
  --conf-color-accent: #d2bd86;
  --conf-color-bg-light: rgb(246, 247, 248);
  --conf-color-bg-cream: rgba(253, 248, 230, 0.9);
}

/* Main container with proper negative space */
#pkgConference {
  padding: var(--conf-space-base);
  margin-bottom: var(--conf-space-3xl);
}

@media (min-width: 768px) {
  #pkgConference {
    padding: var(--conf-space-xl) var(--conf-space-2xl);
  }
}

@media (min-width: 992px) {
  #pkgConference {
    padding: var(--conf-space-2xl) var(--conf-space-3xl);
  }
}

/* Main Title - Fluid Typography with proper spacing */
#pkgConference h1.leoxTitle {
  font-size: var(--conf-font-h1);
  line-height: var(--conf-line-height-tight);
  letter-spacing: 0.05em;
  margin-bottom: var(--conf-space-2xl);
  padding-top: var(--conf-space-lg);
}

@media (min-width: 992px) {
  #pkgConference h1.leoxTitle {
    margin-bottom: var(--conf-space-3xl);
    padding-top: var(--conf-space-xl);
  }
}

/* Section Titles */
#pkgConference h2.leoxTitle1 {
  font-size: var(--conf-font-h2);
  line-height: var(--conf-line-height-tight);
  letter-spacing: 0.02em;
  margin-top: var(--conf-space-2xl);
  margin-bottom: var(--conf-space-lg);
  padding: var(--conf-space-md) var(--conf-space-lg);
}

@media (min-width: 992px) {
  #pkgConference h2.leoxTitle1 {
    margin-top: var(--conf-space-3xl);
    margin-bottom: var(--conf-space-xl);
    padding: var(--conf-space-base) var(--conf-space-xl);
  }
}

/* Body text with proper line-height for readability */
#pkgConference p {
  font-size: var(--conf-font-body);
  line-height: var(--conf-line-height-relaxed);
  margin-bottom: var(--conf-space-base);
  letter-spacing: 0.01em;
}

@media (min-width: 992px) {
  #pkgConference p {
    line-height: var(--conf-line-height-relaxed);
    margin-bottom: var(--conf-space-lg);
  }
}

/* ==========================================================================
   CONFERENCE TABLE - Modern Design with Proper Spacing
   ========================================================================== */

#pkgConference .confTable {
  border-width: 0;
  border-spacing: 0;
  border-collapse: separate;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(1, 75, 66, 0.08);
  width: 100%;
  max-width: 100%;
  margin: var(--conf-space-lg) auto;
}

@media (min-width: 768px) {
  #pkgConference .confTable {
    margin: var(--conf-space-xl) auto;
  }
}

#pkgConference .confTable thead th {
  background: linear-gradient(180deg, rgb(1, 85, 76) 0%, rgb(1, 75, 66) 100%);
  color: white;
  text-shadow: none;
  text-align: center;
  font-size: var(--conf-font-small);
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: var(--conf-space-md) var(--conf-space-sm);
  border-bottom: 3px solid var(--conf-color-accent);
  white-space: nowrap;
}

@media (min-width: 768px) {
  #pkgConference .confTable thead th {
    padding: var(--conf-space-base) var(--conf-space-md);
    font-size: var(--conf-font-table);
  }
}

@media (min-width: 992px) {
  #pkgConference .confTable thead th {
    padding: var(--conf-space-lg) var(--conf-space-base);
  }
}

#pkgConference .confTable thead th span {
  font-size: clamp(0.6rem, 0.7vw + 0.15rem, 0.75rem);
  opacity: 0.85;
}

#pkgConference .confTable td {
  margin: 0;
  padding: var(--conf-space-md) var(--conf-space-sm);
  border-color: rgba(210, 189, 134, 0.3);
  border-width: 0 0 1px 0;
  border-style: solid;
  font-size: var(--conf-font-table);
  text-align: center;
  vertical-align: middle;
  transition: background-color 0.2s ease;
}

@media (min-width: 768px) {
  #pkgConference .confTable td {
    padding: var(--conf-space-base) var(--conf-space-md);
  }
}

@media (min-width: 992px) {
  #pkgConference .confTable td {
    padding: var(--conf-space-lg) var(--conf-space-base);
  }
}

/* First column (venue name) - left aligned */
#pkgConference .confTable td:first-child {
  text-align: left;
  font-weight: 600;
  padding-left: var(--conf-space-base);
  background-color: rgba(1, 75, 66, 0.03);
}

@media (min-width: 768px) {
  #pkgConference .confTable td:first-child {
    padding-left: var(--conf-space-lg);
  }
}

/* Alternating row colors with hover effect */
#pkgConference .confTable tbody tr:nth-child(even) {
  background-color: rgba(246, 247, 248, 0.5);
}

#pkgConference .confTable tbody tr:hover {
  background-color: rgba(88, 250, 172, 0.1);
}

#pkgConference .confTable tbody tr:last-child td {
  border-bottom: none;
}

#pkgConference .ui-table-columntoggle-btn {
  background-color: var(--conf-color-primary);
  color: #fff;
  text-shadow: none;
  margin-bottom: var(--conf-space-md);
  padding: var(--conf-space-sm) var(--conf-space-base);
  font-size: var(--conf-font-small);
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

#pkgConference .ui-table-columntoggle-btn:hover {
  background-color: #58faac;
  color: var(--conf-color-primary);
}

/* ==========================================================================
   MEETING PACKAGES TABLES - Card-style Design
   ========================================================================== */

#pkgConference .meetingPackagesContainer {
  display: flex;
  flex-direction: column;
  gap: var(--conf-space-lg);
  margin-top: var(--conf-space-xl);
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 768px) {
  #pkgConference .meetingPackagesContainer {
    flex-direction: row;
    gap: var(--conf-space-xl);
    justify-content: center;
    align-items: flex-start;
  }
}

#pkgConference .meetingPackageCard {
  flex: 1;
  max-width: 400px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(1, 75, 66, 0.08);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#pkgConference .meetingPackageCard:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(1, 75, 66, 0.12);
}

#pkgConference .meetingPackageCard .confTable {
  margin: 0;
  box-shadow: none;
  border-radius: 0;
}

#pkgConference .meetingPackageCard .confTable thead th {
  font-size: var(--conf-font-h4);
  padding: var(--conf-space-lg) var(--conf-space-base);
}

#pkgConference .meetingPackageCard .confTable td {
  text-align: left;
  padding: var(--conf-space-sm) var(--conf-space-lg);
  font-size: var(--conf-font-body);
  border-color: rgba(210, 189, 134, 0.15);
}

#pkgConference .meetingPackageCard .confTable td.txtDarkGreen {
  font-size: var(--conf-font-h4);
  font-weight: 700;
  padding: var(--conf-space-lg) var(--conf-space-base);
  background: rgba(88, 250, 172, 0.1);
}

#pkgConference .meetingPackageCard .confTable td strong:only-child {
  display: block;
  margin-top: var(--conf-space-md);
  margin-bottom: var(--conf-space-xs);
  font-size: var(--conf-font-small);
  color: var(--conf-color-primary);
  letter-spacing: 0.05em;
}

/* Minimum persons heading */
#pkgConference h4 {
  font-size: var(--conf-font-h4);
  color: var(--conf-color-primary);
  margin-bottom: var(--conf-space-lg);
  font-weight: 600;
}

/* Contact info section */
#pkgConference .contactInfo {
  background: var(--conf-color-bg-light);
  padding: var(--conf-space-lg);
  border-radius: 8px;
  margin-bottom: var(--conf-space-xl);
  line-height: var(--conf-line-height-normal);
}

@media (min-width: 768px) {
  #pkgConference .contactInfo {
    padding: var(--conf-space-xl);
  }
}

/* ==========================================================================
   FUNCTION AREA - Responsive Image Grid Layout
   ========================================================================== */

#pkgFunctionArea {
  margin: 0 auto;
  max-width: 100%;
  width: 100%;
  margin-top: var(--conf-space-xl);
  padding: 0;
}

@media (min-width: 992px) {
  #pkgFunctionArea {
    margin-top: var(--conf-space-2xl);
    padding: 0;
  }
}

@media (min-width: 1400px) {
  #pkgFunctionArea {
    max-width: 2000px;
    padding: 0;
  }
}

/* Image Grid - All Viewports */
#functionAreaBox {
  position: relative;
  width: 100%;
}

#functionAreaBox .functionArea-slideshow {
  display: grid !important;
  gap: 20px;
  /* Auto-fit grid: minimum 375px per image, fill available space */
  grid-template-columns: repeat(auto-fit, minmax(min(375px, 100%), 1fr));
  width: 100%;
}

@media (min-width: 768px) {
  #functionAreaBox .functionArea-slideshow {
    gap: 24px;
  }
}

@media (min-width: 992px) {
  #functionAreaBox .functionArea-slideshow {
    gap: 28px;
  }
}

/* Image container wrapper for caption */
#functionAreaBox .functionArea-slideshow .venue-image-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
  border-radius: 0;
  box-shadow: none;
  transition: none;
}

#functionAreaBox .functionArea-slideshow img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block !important;
  opacity: 1 !important;
  position: static !important;
  visibility: visible !important;
  z-index: auto !important;
  top: auto !important;
  left: auto !important;
  cursor: pointer;
  max-width: 100%;
  border-radius: 0;
}

/* Zero out the margin injected by pb-image-enhancer on its inner wrapper */
#functionAreaBox .functionArea-slideshow .venue-image-wrapper > div {
  margin: 0 !important;
  line-height: 0;
  font-size: 0;
}

/* Caption styling - Fluid Typography */
#functionAreaBox .functionArea-slideshow .venue-caption {
  display: block;
  padding: var(--conf-space-sm, 8px) var(--conf-space-md, 12px);
  background: linear-gradient(180deg, rgba(253, 248, 230, 0.95) 0%, rgba(253, 248, 230, 1) 100%);
  color: var(--conf-color-primary, rgb(1, 75, 66));
  /* Fluid typography: min 0.875rem (14px), preferred 1.2vw + 0.5rem, max 1.125rem (18px) */
  font-size: clamp(0.875rem, 1.2vw + 0.5rem, 1.125rem);
  font-weight: 600;
  text-align: center;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: none;
  line-height: 1.4;
}

@media (min-width: 768px) {
  #functionAreaBox .functionArea-slideshow .venue-caption {
    padding: var(--conf-space-md, 12px) var(--conf-space-base, 16px);
    /* Larger on desktop: min 1rem (16px), preferred 1.5vw + 0.5rem, max 1.25rem (20px) */
    font-size: clamp(1rem, 1.5vw + 0.5rem, 1.25rem);
  }
}

@media (min-width: 1200px) {
  #functionAreaBox .functionArea-slideshow .venue-caption {
    padding: var(--conf-space-base, 16px) var(--conf-space-lg, 20px);
    /* Even larger on large screens: min 1.125rem (18px), preferred 1.2vw + 0.6rem, max 1.375rem (22px) */
    font-size: clamp(1.125rem, 1.2vw + 0.6rem, 1.375rem);
  }
}

/* Hide images with empty src */
#functionAreaBox .functionArea-slideshow img[src=""],
#functionAreaBox .functionArea-slideshow img:not([src]) {
  display: none !important;
}

/* Hide slideshow caption and controls - no longer needed */
#functionAreaBox #functionAreaCaption,
#functionAreaBox .iCenter.top10px,
#functionAreaBox .slideshow-controls,
#pkgFunctionArea .functionArea-prev,
#pkgFunctionArea .functionArea-next {
  display: none !important;
}

/* Section Spacers - Replace fixed spacers with flexible spacing */
#pkgConference .spacer30px {
  height: var(--conf-space-xl);
}

@media (min-width: 768px) {
  #pkgConference .spacer30px {
    height: var(--conf-space-2xl);
  }
}

@media (min-width: 992px) {
  #pkgConference .spacer30px {
    height: var(--conf-space-3xl);
  }
}

/* Content containers with proper padding */
#pkgConference .leoxSudlanan {
  padding: var(--conf-space-base);
  margin-bottom: var(--conf-space-lg);
}

@media (min-width: 768px) {
  #pkgConference .leoxSudlanan {
    padding: var(--conf-space-lg);
    margin-bottom: var(--conf-space-xl);
  }
}

@media (min-width: 992px) {
  #pkgConference .leoxSudlanan {
    padding: var(--conf-space-xl);
    margin-bottom: var(--conf-space-2xl);
  }
}

/* Datripper Adventure Package */

#pkgDayTripper > h1 + div.leoxSudlanan {
  max-width: 550px;
  margin: 0 auto;
}

.daytrip {
  max-width: 550px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.daytrip > div {
  margin: 0;
}

.daytrip ul {
  max-width: 550px;
  padding-left: 15px;
  list-style-type: none;
}

.daytrip ul li {
  margin-left: 15px;
}

.daytrip ul li::before {
  content: "";
  position: absolute;
  margin-top: 4px;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 6px solid #efbb35;
  margin-left: -15px;
}

@media (min-width: 410px) {
  .daytrip img {
    margin-left: 25px;
    margin-top: 0;
  }
}

@media (min-width: 930px) {
  #pkgDayTripper > h1 + div.leoxSudlanan {
    max-width: 950px;
    margin: 0 auto;
  }

  .daytrip {
    max-width: 950px;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
  }
  .daytrip > div {
    max-width: 550px;
    margin: 15px 0px 0px 5px;
  }
  .daytrip ul {
    max-width: 515px;
    margin-top: 0;
  }

  .daytrip h3 {
    margin-top: 0;
  }
}

/* Add-on Services */

#pkgAddOnServices .leoxSudlanan {
  max-width: 950px;
  border: 1px solid #ddd;
  box-shadow: 0px 1px 25px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0px 1px 25px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0px 1px 25px rgba(0, 0, 0, 0.1);
}

#pkgAddOnServices .leoxSudlanan:hover {
  box-shadow: 0px 1px 25px rgba(1, 75, 66, 0.3);
  -webkit-box-shadow: 0px 1px 25px rgba(1, 75, 66, 0.3);
  -moz-box-shadow: 0px 1px 25px rgba(1, 75, 66, 0.3);
}

#pkgAddOnServices ul {
  list-style: none;
  padding-left: 0;
}
.addOns {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.addOns > div {
  margin: 0;
}

@media (min-width: 700px) {
  #pkgAddOnServices ul {
    padding-left: 30px;
    margin-top: -15px;
  }
  .addOns {
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    padding-left: 10px;
  }
  .addOns > div {
    max-width: 600px;
    margin: 15px 0px 0px 0px;
  }
}