/* Global Setup */
html {
  font-size: 112.5%; /* 👈 Sets the base to 18px globally */
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit; /* Ensures box-sizing spreads perfectly */
}

body {
  font-family: Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
  line-height: 1.5;
  background-color: #f3e7ce;
  margin: 0;
  padding: 0;
  width: 100%;
  color: #333333; /* Sets a dark grey font color for the whole page */
  font-style: italic;
}

/* Header and Top Images */
.site-header {
  padding: 0; /* Changed to 0: Allows pink background to touch the very top edge */
  background: #ffdcdc;
  text-align: center;
  border-bottom: 5px solid #bcbab8;
}

.grid-header {
    display: grid;
    grid-template-columns: max-content 1fr max-content;
    align-items: center;
    width: 100%;
    gap: 0; /* Changed: Remove gap if it stretches past screen limits */
    padding: 20px; /* Move the padding here so content inside has breathing room, */
}

.img-left {
    grid-column: 1;
    justify-self: start;
    max-width: 100%;     /* Prevents it from ever blowing up and looking huge */
    height: auto; /* Maintains original square proportions */
}

.img-center {
    grid-column: 2;
    justify-self: center;
    width: 40%;           /* Your requested mobile scaling size */
    min-width: 250px;     /* Keeps text readable on mobile screens */
    max-width: 520px;     /* Prevents blurriness on massive monitors */
    height: auto;         /* Maintains original banner proportions */
}

/* 3 Column Edge-to-Edge Grid */
.main-grid {
  display: grid;
  /* Changed: Left & Right columns fixed to narrow 200px, Middle takes rest */
  grid-template-columns: 200px 1fr 200px;
  width: 100%;
  gap: 20px;
  padding: 0; /* Changed to 0: Removes gaps at the very bottom of the viewport */
}

/* Distinct styling for left side columns */
.left-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  background-color: #ffdcdc;
  border-right: 5px solid #bcbab8;
  margin:  0;
}

.nav-menu {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background-color: #ffdcdc;
  padding: 10px 20px;
  width: 100%;
}

.nav-menu ul {
  list-style: none;     /* Removes default bullet points */
  margin: 0;
  padding: 0;
  display: flex;        /* Aligns links horizontally */
  gap: 1px;            /* Adds space between list items */
  flex-direction: column; /* Force links to stack vertically instead of horizontally */
  align-items: center;  /* Centers links horizontally within the column */
}

.nav-menu .nav-link {
  display: inline-block;
  text-decoration: none;
  padding: 2px 16px;
  /*font-family: sans-serif;*/
  font-size: 16px;
  transition: all 0.3s ease; /* Smooth color transitions */
}


/* Unvisited State */
.nav-menu .nav-link:link, .nav-menu .nav-link:visited  {
  color: #444444;
}

/* Hover State (Mouse over) */
.nav-menu .nav-link:hover {
  color: #d62308;
  /*background-color: #333; /* Adds a subtle background box */
}

.text-block {
    flex: 0 1 auto;
    text-align: left;
    max-width: 320px;
    margin: 0 auto;
    width: 100%;
    padding: 0 15px; /* New: Forces a 15px safe layout buffer on the left and right sides */
}

/* Position tracking context for the container */
.nav-menu .dropdown {
  position: relative;
  width: 100%;
  text-align: center;
}

/* Styled text trigger for the dropdown menu */
.nav-menu .dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  user-select: none;
  cursor: pointer; /* Makes it clear it can be interacted with */
}

/* Small visual indicator arrow */
.nav-menu .arrow {
  display: inline-block; /* Required for transform rotation to work */
  font-size: 10px;
  transition: transform 0.3s ease;
}

/* Hidden sub-menu layout configuration */
/* Added !important to guarantee it stays hidden until hovered */
.nav-menu .dropdown .dropdown-menu {
  display: none !important;
  list-style: none;
  margin: 0;
  padding: 5px 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.03);
}

/* Display rules triggered by mouse hovering actions */
.nav-menu .dropdown:hover .dropdown-menu {
  display: flex !important;
  flex-direction: column;
}

.nav-menu .dropdown:hover .arrow {
  transform: rotate(180deg);
}

/* Desktop Presentation Enhancement Overlay Rules */
@media (min-width: 768px) {
  .nav-menu .dropdown-menu {
    position: absolute;
    top: 0;            /* Changed to 0 so it flies out to the side */
    left: 100%;        /* Pushes it to the right of your vertical sidebar */
    transform: none;   /* Removed centering transform */
    width: 160px;
    background-color: #ffdcdc;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid #bcbab8;
    z-index: 1000;
  }
}

.layout-spacer {
    height: 15px;
  }

.middle-col {
   display: flex;
   flex-direction: column;
   min-height: 100%; /* Forces the container to stretch to the bottom of the grid */
    background-color: #f3e7ce;
    margin:  0;
    padding: 20px 25px; /* Safely pads the middle text block boundaries */
    }

    /* NEW CONTAINER: Keeps all content balanced and centered in the column area */
.middle-col-content {
   max-width: 800px;    /* Prevents paragraphs and floats from stretching too wide */
   margin: 0 auto;      /* Horizontally centers this content block in the column space */
   width: 100%;
   margin: 0 auto;
   }

/* Images and Figures*/
img {
  width: 100%;
  height: auto;
  display: block;
  /*flex-shrink: 0;*/
}

figure {
  margin: 0;
  text-align: center; /* Centers the figcaption text */
}

figcaption {
  font-size: 0.85rem;
  color: #666;
  margin-top: 5px;
  padding: 0 10px; /* Adds 10px space on the left and right */
}

/* Center the float wrapping containers */
.clearfix {
  width: 100%;
  margin: 0 0 15px 0;      /* Perfectly centers the image + text container block */
  padding: 0; /* Creates an active 25px safe buffer wall away from grid lines */
}

/* Middle Column Floating Text Rules */
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

/* Reset inner paragraph tags inside clearfix blocks so padding isn't duplicated */
.clearfix p {
  padding: 0;
  margin-bottom: 15px;
}


.side-text-img {
  float: left;
  width: 40%;
  max-width: 360px; /* Forces images to stay inside original sizing caps */
  margin-top: 5px;
  margin-right: 20px;     /* Creates a clean gap between the image and the side text */
  margin-bottom: 15px;
  margin-left: 0;
  display: block;

}

/* Ensures images inside your layout floats scale cleanly to fit 100% of the 40% box */
.side-text-img img {
  width: 100%;
  height: auto;
  display: block;
}

/* Ensure wide paragraph text alignment looks clean */
.middle-col p {
  width: 100%;
  text-align: left;    /* Optional: Keeps actual paragraph reading text left-aligned while the block itself is centered */
  margin-bottom: 15px;
  padding: 0;      /* Standard standalone paragraphs now also match the 25px safe buffer layout line */
}

/* NEW CLASS: Overrides previous page floats and scales the image larger */
.side-text-img.full-width-center {
  float: none;          /* Removes the left float */
  width: 100%;          /* Allows the figure to span the full 800px column width */
  /*max-width: 100%;      /* Overrides the 360px cap
  margin: 0 auto 15px;  /* Centers the block and adds bottom spacing */
  max-width: 520px;     /* Set this to your original image's native width */
  margin: 0 auto 15px;
  flex-shrink: 0;
}

/* Optional: Limits the maximum scale of just this image if it stretches too much */
.side-text-img.full-width-center img {
  /*max-width: 650px;     /* Set this to whatever size you prefer (e.g., 520px, 650px, 100%)
  margin: 0 auto;       /* Centers the image within the full-width figure box */
  width: 100%;
  height: auto;
  display: block;
}

.footer-note {
    margin-top: auto; /* Automatically consumes all remaining empty space above it */
    padding-top: 2rem; /* Keeps it from crowding your bottom paragraph text */
    width: 100%;
}

/* FIXED: Explicitly overrides the general left-aligned paragraph rule */
.footer-note p {
  color: #0064e6;
  font-style: italic;
  font-size: 1.5rem !important;
  font-weight: bold;
  text-align: center;
  width: 100%;
}

/* Core container wrapping the image */
.suite-map-container {
  width: 100%;
  text-align: center;
  margin: 20px auto;
}

.side-by-side-gallery {
  display: flex;
  gap: 20px;            /* Adds a clean space between the two images */
  margin-top: 30px;     /* FIXED: Adds clean breathing room below the table */
  margin-bottom: 20px;  /* Matches your vertical rhythm spacing */
  width: 100%;
}

.side-by-side-gallery figure {
  flex: 1;              /* Dictates that both image slots share equal width */
  min-width: 0;         /* Safeguards layout from breaking on tiny mobile screens */
}

/* Container Box */
.bottom-split-container {
  display: flex;
  flex-direction: row; /* Puts columns side-by-side on desktop */
  width: 100%;
  margin-top: 25px;
  box-sizing: border-box;
}

/* Container Box that forces columns side-by-side */
.bottom-split-container {
  display: flex !important;
  flex-direction: row;
  width: 100%;
  margin-top: 25px;
  box-sizing: border-box;
}

/* Left Column: Equal 50% width, completely clear */
.column-clear {
  flex: 1; /* Sets to equal width */
  border: none !important;
  background: transparent !important;
  padding: 15px;
  box-sizing: border-box;
}

/* Right Column: Equal 50% width, styled with pink and dark gray double border */
.column-styled {
  flex: 1; /* Sets to equal width */
  background-color: #ffdcdc !important;
  border: 5px double #444444 !important; /* Dark gray double border */
  padding: 15px;
  box-sizing: border-box;
}

/* ===== COMPLEMENTARY STYLES FOR THE CENTER COLUMN ENGINE ===== */

/* ===== ANTI-DISTORTION & CRISP UPSCALING ENGINE ===== */

/* Base configuration for center column content blocks to stretch properly */
.custom-center-grid {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start;
  gap: 28px; /* Establishes consistent vertical visual rhythm */
  width: 100%;
}

.center-row {
  width: 100%;
  box-sizing: border-box;
}

/* Row 1 Typography Scaling */
.row-header h1 {
  font-size: 2.75rem;
  font-weight: 800;
  text-align: center;
  line-height: 1.2;
  margin-bottom: 10px;
  color: #0064e6;
}

/* Row 2 Desktop Configuration (Image & Text Side-By-Side)
.row-media-split {
  display: flex;
  align-items: center;
  gap: 25px;
}
.row-media-split .side-text-img.full-width-center {
  flex: 1;
  margin: 0; /* Clear baseline auto margins to let flexbox balance it
}
.row-media-split .media-text-content {
  flex: 1;
}*/

/* ===== FIXED ROW 2 ENGINE ===== */
.row-media-split {
  display: flex !important;   /* Force flex layout for desktop split */
  flex-direction: row;
  align-items: center;
  gap: 25px;
  width: 100%;
}

.row-media-split .side-text-img.full-width-center {
  flex: 1;
  width: 100%;
  max-width: 520px;          /* Preserves maximum desktop scale threshold */
  margin: 0;                 /* Resets auto alignment so flex space engine functions */
}

.row-media-split .media-text-content {
  flex: 1;
}

/* ===== FIXED JUST ADDED ROW 5 ENGINE ===== */
/* Targets specifically by layout row wrapper instead of breaking parent middle-col */
.custom-center-grid .suite-map-container {
  width: 100% !important;
  text-align: center !important;
  display: block !important;
  margin: 30px auto !important;
}

.custom-center-grid .suite-map-container img {
  width: 100% !important;
  max-width: 345px !important;  /* Locks it down perfectly */
  height: auto !important;
  display: inline-block !important;
  margin: 0 auto !important;
}
/* Universal image helper to guarantee space-filling */
.grid-img-fill {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
  object-fit: cover;
}

/* Row 5 Sizing restriction to keep it nicely proportioned */
.large-center-img {
  max-width: 100%;
  max-height: 400px;
  margin: 0 auto;
}

.right-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  background-color: #ffdcdc;
  border-left: 5px solid #bcbab8;
  margin:  0;
}

/* Right Column Links: Remove underlines and inherit text formatting */
.right-col a {
  text-decoration: none;
  transition: color 0.3s ease;
}

/* Right Column Links: Default and Visited Color */
.right-col a:link, .right-col a:visited {
  color: #444444;
}

/* Right Column Links: Hover Color */
.right-col a:hover {
  color: #d62308;
}

/*ADDED for map.html right column/8
/* Ensure the right column stretches its children fully */
.right-col {
  width: 100%;
  box-sizing: border-box;
  padding: 15px 10px; /* Add top/bottom padding to the column wrapper */
}

/* Container for individual stacked items */
.right-col-item {
  width: calc(100% - 20px); /* Creates a thin 10px margin on left and right sides */
  margin: 0 10px !important;
  display: flex;
  flex-direction: column;
}

/* Make the link span completely across the allowed container space */
.right-col-item > a {
  display: block;
  width: 100%;
}

/* Force thumbnails to scale perfectly inside the column width without breaking aspect ratios */
.right-col-item img {
  width: 100% !important;
  height: auto !important; /* Overwrites the global 200px constraint */
  object-fit: contain !important; /* Preserves full uncropped image shapes */
  display: block;
}

/* Style captions beautifully right beneath the thumbnail */
.right-col-item figcaption {
  padding-top: 8px;
  text-align: center;
  font-size: 0.95rem;
  line-height: 1.4;
}




/* Active Click State: Shrinks slightly when pressed */
.nav-menu .nav-link:active {
  transform: scale(0.95);
}

/* Current Page State (Using the manual .active class from HTML) KEEP AT BOTTOM */
.nav-menu .nav-link.active {
  color: #f62d12;
  /*border-bottom: 2px solid #00ebc7;*/
}

/* Isolated fix to keep the image at its native 345px size and perfectly centered */
.middle-col .suite-map-container {
  width: 100% !important;
  text-align: center !important; /* Perfect fallback centering for inline elements */
  display: block !important;    /* Overrides the problematic flex behavior */
  margin: 30px auto !important;
}

.middle-col .suite-map-container img {
  width: 100% !important;
  max-width: 345px !important;  /* Locks it to its exact native desktop size */
  height: auto !important;
  display: inline-block !important; /* Cooperates perfectly with text-align: center */
  margin: 0 auto !important;
}

/* Keeps it mobile friendly so it shrinks safely on narrow smartphone screens */
@media (max-width: 768px) {
  .middle-col .suite-map-container img {
    max-width: 100% !important;
  }
}

/* Mobile Responsiveness Rules (Under 768px wide screens) */
@media (max-width: 768px) {
  .bottom-split-container {
    flex-direction: column; /* Safely stacks them on phones so text isn't squished */
  }

  .column-clear, .column-styled {
    flex: none;
    width: 100%;
    margin-bottom: 20px;
  }

/* Mobile Responsiveness Screen Settings */
@media (max-width: 768px) {
  .bottom-split-container {
    flex-direction: column; /* Automatically stacks them vertically on mobile phones */
  }
}

  .column-clear, .column-styled {
    flex: none;
    width: 100%; /* Forces columns to stretch to full width on mobile */
    margin-bottom: 20px; /* Adds clean spacing between stacked columns */
  }
}

/* Mobile Responsive Breakpoint */
@media (max-width: 768px) {

  /* Stacks the 3-column container vertically */
  .bottom-split-container {
    flex-direction: column !important;
  }

  .column-clear, .column-styled {
    flex: none;
    width: 100%;
    margin-bottom: 20px;
  }


  /* 1. Change the 3-column grid into a single-column vertical stack */
  .main-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 0;
    padding: 0;
  }

  /* 2. Rearrange the visual order of the column elements */
  .middle-col {
    order: 1; /* Shows up first right below the header */
    padding: 20px 15px;
    width: 100%;
    box-sizing: border-box;
  }

  .left-col {
    order: 2; /* Shows up second */
    border-right: none;
    border-bottom: none;
    padding-bottom: 20px;
    width: 100%;
    box-sizing: border-box;
  }

  .right-col {
    order: 3; /* Shows up at the bottom */
    border: none;
    padding: 20px 0;
    width: 100%;
    box-sizing: border-box;
  }

  /* 3. Header elements scaling */
  .grid-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
  }

  .img-left {
    width: 60px;
    height: auto;
  }

  .img-center {
    width: 70%;
    min-width: auto;
    max-width: 100%;
  }
}
/* ===== MOBILE & TABLET OPTIMIZATIONS (MEDIA QUERY) ===== */
@media (max-width: 768px) {
  /* Tighten visual gaps slightly for smaller screen footprints */
  .custom-center-grid {
    gap: 20px;
  }

  /* Compress Header scale to prevent ugly sentence linebreaks on mobile */
  .row-header h1 {
    font-size: 1.85rem;
  }

  /* Break Row 2 into a comfortable vertical stack */
  .row-media-split {
    flex-direction: column;
    gap: 15px;
  }
  .row-media-split .side-text-img.full-width-center {
    max-width: 100%; /* Allows image to use healthy mobile real estate */
  }

  /* Force side-by-side gallery pairs onto their own clean rows to ensure image details remain readable */
  .side-by-side-gallery {
    flex-direction: column !important;
    gap: 15px !important;
    margin-top: 10px !important;
    margin-bottom: 10px !important;
  }

  .side-by-side-gallery figure {
    width: 100% !important;
  }
}

/*NEW ADDON 9/7/26*/
/* Hard-reset to force-close any accidental open comments above this line */

/* 1. ROW 2 FIX: Make image cover 65% of the row, text covers 35% */
.custom-center-grid .row-media-split {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 25px !important;
  width: 100% !important;
}
.custom-center-grid .row-media-split .side-text-img.full-width-center {
  flex: 0 0 65% !important;
  max-width: 65% !important;
  margin: 0 !important;
}
.custom-center-grid .row-media-split .media-text-content {
  flex: 0 0 35% !important;
  max-width: 35% !important;
}

/* 2. ALL IMAGES UNIFORM SIZE: Enforces a perfectly matching 4:3 grid profile */
.custom-center-grid img.crisp-upscale-img,
.custom-center-grid .side-text-img img {
  width: 100% !important;
  height: 280px !important; /* Fixed uniform height forces alignment */
  object-fit: cover !important; /* Crops edges cleanly so photos don't squish */
}

/* 3. ROW 5 FIX: Match size of 1 gallery item from above & center perfectly */
.custom-center-grid .row-final-center {
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
}
.custom-center-grid .row-final-center .final-row-wrapper {
  width: calc(50% - 13px) !important; /* Matches exactly half the grid room */
  max-width: calc(50% - 13px) !important;
  margin: 0 auto !important;
}

/* 4. MOBILE SAFEGUARD: Keeps it responsive */
@media (max-width: 768px) {
  .custom-center-grid .row-media-split {
    flex-direction: column !important;
  }
  .custom-center-grid .row-media-split .side-text-img.full-width-center,
  .custom-center-grid .row-media-split .media-text-content {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  .custom-center-grid .side-by-side-gallery {
    flex-direction: column !important;
    gap: 15px !important;
  }
  .custom-center-grid img.crisp-upscale-img,
  .custom-center-grid .side-text-img img {
    height: auto !important; /* Allow normal stretching on small phone viewports */
  }
  .custom-center-grid .row-final-center .final-row-wrapper {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/*SECOND CODE ADD 9/8/26*/
/* ==========================================
   1. DESKTOP VIEWPORTS (Wide Screens)
   ========================================== */
.middle-col {
  padding: 20px 10px !important;
}

.middle-col-content {
  max-width: 1000px !important;
  width: 100% !important;
}

/* Force Row 2 to split exactly 50/50 down the middle on desktop screens */
.custom-center-grid .row-media-split {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  gap: 20px !important;
  width: 100% !important;
}

.custom-center-grid .row-media-split .side-text-img.full-width-center {
  flex: 0 0 calc(50% - 10px) !important;
  max-width: calc(50% - 10px) !important;
  width: calc(50% - 10px) !important;
  margin: 0 !important;
  float: none !important;
}

.custom-center-grid .row-media-split .media-text-content {
  flex: 0 0 calc(50% - 10px) !important;
  max-width: calc(50% - 10px) !important;
  width: calc(50% - 10px) !important;
  display: flex !important;
  align-items: center !important;
}

.custom-center-grid .row-media-split .media-text-content p {
  margin: 0 !important;
  width: 100% !important;
}


/* ==========================================
   2. MOBILE SAFEGUARD (Kicks in when columns stack)
   ========================================== */
@media (max-width: 768px) {
  /* Break the 50/50 horizontal split and stack Row 2 vertically */
  .custom-center-grid .row-media-split {
    flex-direction: column !important;
    gap: 15px !important;
  }

  /* Force both the image and text in Row 2 to take up full width on phones */
  .custom-center-grid .row-media-split .side-text-img.full-width-center,
  .custom-center-grid .row-media-split .media-text-content {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Ensure the side-by-side gallery rows also stack nicely on small screens */
  .custom-center-grid .side-by-side-gallery {
    flex-direction: column !important;
    gap: 15px !important;
  }

  /* Let images resize naturally based on mobile screen width */
  .custom-center-grid img.crisp-upscale-img,
  .custom-center-grid .side-text-img img {
    height: auto !important;
  }

  /* Reset the final image to fill the screen width on mobile */
  .custom-center-grid .row-final-center .final-row-wrapper {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/*THIRD ADD 9/8/26*/
/* ==========================================
   3. PERFECT BALANCE WIDER MIDDLE & BOTTOM IMAGE EXPANSION
   ========================================== */

/* Keep sidebars locked at 200px while letting the layout span wide */
.main-grid {
  grid-template-columns: 200px 1fr 200px !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Cushion the center space slightly */
.middle-col {
  padding: 20px 10px !important;
}

/* WIDENED: Bumped up from 1100px to 1250px to better balance the layout */
.middle-col-content {
  max-width: 1250px !important;
  width: 100% !important;
}

/* Force ALL images to scale beautifully into uniform 4:3 shapes */
.custom-center-grid img.crisp-upscale-img,
.custom-center-grid .side-text-img img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 3 !important;
  object-fit: cover !important;
}

/* ROW 5 EXPANSION FIX: Target the wrapper and force it to be exactly half the row width */
.custom-center-grid .row-final-center {
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
}
.custom-center-grid .row-final-center .final-row-wrapper {
  flex: 0 0 calc(50% - 10px) !important;
  max-width: calc(50% - 10px) !important;
  width: calc(50% - 10px) !important;
  margin: 0 auto !important;
}

/* FORCE the internal HTML containers in Row 5 to expand fully and match the dimensions */
.custom-center-grid .row-final-center .final-row-wrapper .small-img-upscale-container,
.custom-center-grid .row-final-center .final-row-wrapper img {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
}

/* Maintain crisp mobile stacking logic */
@media (max-width: 768px) {
  .custom-center-grid .row-final-center .final-row-wrapper {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* ==========================================================
   GLOBAL ULTRAWIDE MONITOR ADJUSTMENTS (Screens 1400px and up)
   ========================================================== */
@media (min-width: 1400px) {

  /* 1. EXPANDS your subpage content containers (tables, galleries, grids)
        so side margins shrink and stay wide on big monitors */
  .middle-col-content {
    max-width: 1400px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  /* 2. RESTRAINS pure text strings globally to a perfect reading width
        so lines don't get too long to track with your eyes */
  .middle-col > p {
    max-width: 920px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  /* 3. Enhances text rhythm inside custom grid blocks */
  .custom-center-grid .row-media-split .media-text-content p {
    font-size: 1.1rem !important;
    line-height: 1.6 !important;
  }
}
/* Ensure the side-by-side galleries stack correctly on mobile viewports */
@media (max-width: 768px) {
  .custom-center-grid .side-by-side-gallery {
    flex-direction: column !important;
    gap: 15px !important;
  }

  .custom-center-grid img.crisp-upscale-img,
  .custom-center-grid .side-text-img img {
    height: auto !important;
  }
}
/* ==========================================================
   GAP REDUCTION & LAYOUT ENGINE ALIGNMENT CLEANUP
   ========================================================== */

/* Tighten vertical gaps between rows in the main center container */
.custom-center-grid {
  gap: 16px !important; /* Reduced from 28px to eliminate layout bloat */
}

/* Eliminate excessive empty flex-box headroom around side-by-side images */
.custom-center-grid .side-by-side-gallery {
  margin-top: 15px !important;
  margin-bottom: 5px !important;
  align-items: flex-start !important; /* Prevents rows from stretching vertically */
}

/* Clean up paragraph vertical margin rules right below gallery assets */
.custom-center-grid .center-row p {
  margin-top: 5px !important;
  margin-bottom: 10px !important;
}

/* Ensure the Section 5 standalone bottom image sits flush near the text */
.custom-center-grid .row-final-center {
  margin-top: 10px !important;
  margin-bottom: 5px !important;
}

/* Hard reset aspect ratios to cooperate cleanly with explicitly defined inline heights */
.custom-center-grid img.crisp-upscale-img,
.custom-center-grid .side-by-side-gallery figure img,
.custom-center-grid .side-text-img img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: auto !important; /* Removes the rigid 4/3 box bounding line */
  object-fit: contain !important;
}

/* Force Section 5 row and its inner components to take up 100% of the core column */
.custom-center-grid .row-full-core,
.custom-center-grid .row-full-core figure,
.custom-center-grid .row-full-core a {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  margin: 0 auto !important;
}

/* Ensure the image fills the 100% container space up to its maximum bounds smoothly */
.custom-center-grid .row-full-core img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
}

/* ==========================================================
   1. FIXED DESKTOP ANCHOR: RESTORES SIDEBAR ALIGNMENT
   ========================================================== */
@media (min-width: 769px) {
  /* This forcibly rips your three-column layout out of any accidental
     mobile tracking loops and locks your sidebars side-by-side */
  .main-grid {
    display: grid !important;
    grid-template-columns: 200px 1fr 200px !important;
    width: 100% !important;
  }
  .left-col  { grid-column: 1 !important; order: unset !important; }
  .middle-col { grid-column: 2 !important; order: unset !important; width: auto !important; }
  .right-col { grid-column: 3 !important; order: unset !important; }

  /* HEADER ALIGNMENT: Shifts center image to exact center of screen */
  .img-left {
    max-width: 140px !important;
    height: auto !important;
  }
  .img-center {
    transform: translateX(calc(-140px / 2)) !important;
  }
}

/* ==========================================================
   2. ISOLATED GALLERY SPACING ENGINE (THIS PAGE ONLY)
   ========================================================== */

/* Sets matching horizontal gap width for image galleries */
#island-gallery-override .side-by-side-gallery,
#island-gallery-override .gallery-grid {
  display: flex !important;
  flex-direction: row !important;
  gap: 5px !important;             /* Clean 5px gap between side-by-side photos */
  width: 100% !important;
  max-width: 920px !important;     /* Forces rows into perfect core vertical column alignment */
  margin-left: auto !important;    /* Perfectly centers rows inside the middle column space */
  margin-right: auto !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  box-sizing: border-box !important;
}

/* Fixes vertical row tracking without breaking parent height alignments */
#island-gallery-override .middle-col-content.custom-center-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;            /* Minimizes space between rows vertically */
}

/* Restrains text strings from spreading too wide to preserve reading comfort */
#island-gallery-override .center-row p {
  max-width: 920px !important;     /* Matches your optimal native reading layout profile */
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 4px !important;
  margin-bottom: 8px !important;
}

/* Eliminates image figure margins to clamp vertical photo gaps tight */
#island-gallery-override .side-by-side-gallery figure {
  flex: 1 !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* STANDALONE BOTTOM IMAGE RESTRAINER: Compresses Section 5 to 920px */
#island-gallery-override .custom-center-grid .row-full-core {
  display: block !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  width: 100% !important;
  max-width: 920px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
#island-gallery-override .custom-center-grid .row-full-core figure,
#island-gallery-override .custom-center-grid .row-full-core a {
  display: block !important;
  width: 100% !important;
  max-width: 920px !important;
  margin: 0 auto !important;
}
#island-gallery-override img[src*="Looking-North-over-Regatta-Point"] {
  display: block !important;
  width: 100% !important;
  max-width: 920px !important;     /* Spans across the equivalent space of two columns perfectly */
  height: auto !important;
  margin: 0 auto !important;
}

/* ==========================================================
   3. MOBILE RESPONSIVE BLOCK (SAFELY ISOLATED AT THE VERY END)
   ========================================================== */
@media (max-width: 768px) {
  #island-gallery-override .side-by-side-gallery,
  #island-gallery-override .gallery-grid {
    flex-direction: column !important;
    gap: 15px !important;          /* Swaps galleries to vertical stack on mobile devices */
  }
}