/* =========================
   module.css (FULL)
   ========================= */

/* --- Section wrapper --- */
.atg-venue {
  background: #ffffff; /* Sets section background */
}

/* --- Responsive container (your clamp strategy by breakpoint) --- */
.map-container {
  width: 100%;         /* Mobile default: full width */
  margin: 0 auto;      /* Centers container when clamped under max widths */
}

/* VW #3: <= 960px -> 100% */
@media (max-width: 960px) {
  .atg-venue {
    padding: 0;        /* Matches your existing mobile padding intent */
  }

  .map-container {
    width: 100%;       /* Ensures no forced minimum width on mobile */
  }
}

/* VW #2: 961px - 1532px -> max width 1280px */
@media (min-width: 961px) and (max-width: 1536px) {
  .venue-content {
  width: 100%;
  /* STATIC vertical padding */
  padding-top: 24px;
  padding-bottom: 24px;
  /* FLUID horizontal padding */
  padding-left: calc((640px - 400px) / 2);
  padding-right: calc((640px - 400px) / 2);
  /*padding-left: clamp(170px, calc(233.903px - 1.245cqi), 210px);
  padding-right: clamp(170px, calc(233.903px - 1.245cqi), 210px);?*/
}
  .map-container {
    width: clamp(0px, 100%, 1280px); /* Uses 100% until it hits 1280px max */
  }
}

/* VW #1: 1533px+ -> max width 1440px */
@media (min-width: 1537px) {
  .map-container {
    width: clamp(0px, 100%, 1440px); /* Uses 100% until it hits 1440px max */
  }
}

/* --- Card wrapper (venue box) --- */
.atg-venue-box {
  border-radius: 24px;  /* Card rounding */
  background: #f4f4f4;  /* Card background */
  overflow: hidden;     /* CRITICAL: clips children to rounded corners */
  justify-items: stretch; /* More predictable than center for grid children */
}

/* --- Content column spacing --- */
.venue-content {
  width: 100%;
  /* STATIC vertical padding */
  padding-top: 24px;
  padding-bottom: 24px;
  /* FLUID horizontal padding */
  padding-left: calc((720px - 400px) / 2);
  padding-right: calc((720px - 400px) / 2);
  /*padding-left: clamp(170px, calc(233.903px - 1.245cqi), 210px);
  padding-right: clamp(170px, calc(233.903px - 1.245cqi), 210px);?*/
}
.venue-content h6 {
  color: #007bd9;
  font-size: clamp(1.125rem, 1.125rem + 0.1042vw, 1.25rem);
  font-weight: 700;
  line-height: 1.5rem;
  text-transform: uppercase;
}
.venue-content p {
  color: #0e1a27;
  font-size: clamp(1.125rem, 1.125rem + 0.1042vw, 1.25rem);
  font-weight: 500;
  line-height: 1.5rem;
}
.venue-content a {
  color: #007bd9;
  font-size: clamp(1.125rem, 1.125rem + 0.1042vw, 1.25rem);
  font-weight: 700;
  line-height: 1.5rem;
  text-transform: uppercase;
}
/* Mobile content spacing + alignment */
@media (max-width: 960px) {
  .venue-content {
    padding: 20px;      /* Tighter padding on mobile */
    text-align: center; /* Keeps content centered when stacked */
  }
}

/* --- Map container with aspect ratio + shadow --- */
.map {
  position: relative;   /* Required for absolute iframe positioning */
  width: 100%;
  overflow: hidden;     /* Prevents iframe overflow */
  background: #ffffff;  /* Map background to match your original */

  /* Modern ratio handling */
  aspect-ratio: 16 / 9; /* Keeps the map responsive without padding hacks */

  /* Shadow similar to Tailwind defaults (kept from your original CSS intent) */
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
}

/* Fallback for older browsers that don't support aspect-ratio */
@supports not (aspect-ratio: 16 / 9) {
  .map {
    padding-top: 56.25%; /* 16:9 Aspect Ratio fallback */
  }
}

/* Optional upgrade: desktop minimum height parity (prevents "short map" next to tall text) */
@media (min-width: 961px) {
  .map {
    min-height: 360px; /* Adjust if you want more visual weight */
  }
}

/* Optional upgrade: embed hardening
   Forces embed to fill container even if HubSpot/Google inject inline width/height styles */
.map-embed,
.map-embed > * {
  width: 100% !important;   /* Overrides inline sizing from embed HTML */
  height: 100% !important;  /* Ensures wrapper fills the aspect-ratio box */
}

/* Force iframe to fill the map box reliably */
.map-embed iframe,
.map iframe {
  position: absolute;
  inset: 0;                 /* top/right/bottom/left:0 in one line */
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  border: 0;
  display: block;
}

/* Optional: directional rounding on desktop only (looks correct in 2-column layout) */
@media (min-width: 961px) {
  .map {
    border-radius: 0 24px 24px 0; /* Rounds right side only on desktop */
  }

  /* Left column rounding to match (only needed if you see slight seams) */
  .atg-venue-box > .venue-content {
    border-radius: 24px 0 0 24px;
  }
}

/* On mobile the wrapper handles rounding; avoid weird top/bottom radius conflicts */
@media (max-width: 960px) {
  .map {
    border-radius: 0; /* Wrapper (.atg-venue-box) clips rounded corners */
  }
}

/* --- Link styling (fixed hover overlay reliability) --- */
.card-link-wrapper:where(.maplink) {
  margin-top: 1rem;
  display: flex;
  justify-content: flex-start; /* Desktop alignment */
}

/* Center the "Directions" link on mobile for cleaner stacked layout */
@media (max-width: 960px) {
  .card-link-wrapper:where(.maplink) {
    justify-content: center;
  }
}

/* Anchor sets positioning context for :before overlay */
.card-link:where(.maplink) {
  position: relative;        /* Needed for hover overlay */
  display: inline-flex;
  align-items: center;
  gap: .25rem;

  /* VISUAL STATE */
  padding: 0;                /* No padding by default */

  text-decoration: none;
  transition:
    padding .2s ease,
    color .2s ease;
}
.card-link.link-hover:hover {
  padding: .25em .5em;       /* Button-like padding on hover */
}
/* Ensure text and icon stay above the overlay */
.card-link:where(.maplink) .card-link-text,
.card-link:where(.maplink) .card-link-icon {
  position: relative;
  z-index: 2;                 /* Keeps text/icon clickable and visible */
}

/* Hover overlay background */
.link-hover:before {
  position: absolute;
  inset: 0;
  content: "";
  z-index: 1;
  background-color: var(--color-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
}

.link-hover:hover:before {
  transform: scaleX(1);
}

/* Icon sizing + subtle motion */
.card-link:where(.maplink) .card-link-icon:where(.maplink) {
  height: 1rem;
  width: 1rem;
  transition: transform .3s ease;
}

/* Small nudge on hover (optional but clean) */
.card-link:hover .card-link-icon {
  transform: translateX(2px);
}

/* Keep your original hover color behavior (simplified and reliable) */
.card-link.link-hover:hover {
  color: rgb(255 255 255);
}

.card-link.link-hover:hover svg {
  color: rgb(255 255 255);
}