/* ============================================================
   Gardenieres page-only styles (scoped)
   ============================================================ */
/* Ensure only one play button appears */
.media-card__media .video-card .play-svg.off-center {
  display: none !important;  /* Hide off-center play button */
}
.media-card__media .video-card .play-svg.correct {
  z-index: 10 !important;  /* Ensure the correct play button is on top */
  display: block !important;  /* Make sure only the centered play button is visible */
}



body.case-gardenieres {
  --ink: #022351;
  --bg-band: #f7f7f7;
  --rule: #eaeaea;
  --card-radius: 16px;
}

/* === General Helpers === */
body.case-gardenieres .case-sections {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin: 3rem 0;
}

body.case-gardenieres .case-section {
  flex: 1;
  padding: 1rem;
  background: #fafafa;
  border-radius: 10px;
}

body.case-gardenieres .section-heading {
  font-family: 'Barlow', system-ui, sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: .5rem;
  letter-spacing: -.02em;
}

@media (min-width: 768px) {
  body.case-gardenieres .case-sections { flex-direction: row; }
}

/* === Grid Styling === */
body.case-gardenieres .media-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
  align-items: start;
}

@media (min-width: 880px) {
  body.case-gardenieres .media-grid { gap: 1.25rem; }
}

/* === Media Card Styling === */
body.case-gardenieres .media-card {
  display: flex;
  flex-direction: column;
  grid-column: span 12;
  background: #fff;
  border: 1px solid #E7ECF2;
  border-radius: 1rem;
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
  padding: .5rem;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

body.case-gardenieres .media-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(0,0,0,.06);
  border-color: #D8E1EB;
}

body.case-gardenieres .media-card:focus-visible {
  outline: 3px solid #0ea5e9;
  outline-offset: 2px;
}

@media (min-width: 640px) { body.case-gardenieres .media-card { grid-column: span 6; } }
@media (min-width: 1040px) { body.case-gardenieres .media-card { grid-column: span 4; } }

/* === Caption Background === */
body.case-gardenieres .media-card__caption {
  background-color: #f7f7f7;
  padding: 1rem;
  color: #0f2a41;
  font-weight: 700;
  border-radius: 12px;
}

/* === Media Frame === */
body.case-gardenieres .media-card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  overflow: hidden;
  border-radius: .75rem;
  background: none !important;
}

body.case-gardenieres .media-card__media picture,
body.case-gardenieres .media-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  z-index: 1;
}

/* === Play Button Styling === */
body.case-gardenieres .media-card__media .video-card .play-svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 72px;
  height: 72px;
  pointer-events: none;
  z-index: 6;
}

/* Correct Play Button (Centered with Circle and Triangle) */
body.case-gardenieres .media-card__media .video-card .play-svg.correct {
  display: block !important;
}

body.case-gardenieres .media-card__media .video-card .play-svg.correct circle {
  fill: rgba(0, 0, 0, 0.85);  /* Black circle */
  r: 36;
}

body.case-gardenieres .media-card__media .video-card .play-svg.correct polygon {
  fill: white;   /* White triangle */
  points: "34,26 34,54 56,40";  /* Coordinates for the triangle */
  z-index: 7;    /* Ensure triangle stays above the circle */
}

/* === Hide Unwanted Off-Center Play Button === */
body.case-gardenieres .media-card__media .video-card .play-svg.off-center,
body.case-gardenieres .media-card__media .video-card .play-svg.off-center circle,
body.case-gardenieres .media-card__media .video-card .play-svg.off-center polygon {
  display: none !important;  /* Hide off-center play button and its components */
}

/* Remove off-center button, ensure centered button stays visible */
body.case-gardenieres .media-card__media .video-card .play-svg.off-center {
  visibility: hidden !important;
  z-index: -1 !important;  /* Push behind the correct play button */
}

/* === Modal (Video) === */
body.case-gardenieres .media-modal {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(2,6,23,.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
  z-index: 1000;
}

body.case-gardenieres .media-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}

body.case-gardenieres .media-modal__backdrop {
  position: absolute;
  inset: 0;
}

body.case-gardenieres .media-modal__dialog {
  position: relative;
  width: min(92vw, 1080px);
  max-height: 88vh;
  background: #0B1220;
  border-radius: 1rem;
  box-shadow: 0 24px 60px rgba(0,0,0,.35);
  overflow: hidden;
}

body.case-gardenieres .media-modal__video-wrap {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}

body.case-gardenieres .media-modal__video-wrap iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

body.case-gardenieres .media-modal__close {
  position: absolute;
  top: .5rem;
  right: .5rem;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.25);
  color: #fff;
  border-radius: .6rem;
  padding: .4rem .6rem;
  cursor: pointer;
}

body.case-gardenieres .media-modal__close:hover {
  background: rgba(0,0,0,.75);
}

/* Ensure no off-center SVG content remains visible */
body.case-gardenieres .media-card__media .video-card .play-svg.off-center,
body.case-gardenieres .media-card__media .video-card .play-svg.off-center circle,
body.case-gardenieres .media-card__media .video-card .play-svg.off-center polygon {
  visibility: hidden !important;
  opacity: 0 !important;
  z-index: -1 !important;
}

/* Full-Width Section Styling */
.full-width-section {
    width: 100%;
    padding: 4rem 0; /* Space between top and bottom */
    background-color: #f7f7f7; /* Lighter background to match the rest of the page */
    text-align: center;
}

.full-width-section .container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

/* Heading */
.full-width-section .section-heading {
    font-family: 'Barlow', sans-serif;
    font-size: 2rem;
    font-weight: 800;
    color: #022351; /* Match color theme */
    margin-bottom: 1.5rem;
}

/* Section Description */
.full-width-section .section-description {
    font-size: 1.1rem;
    color: #0f2a41;
    line-height: 1.6;
    margin-bottom: 2rem;
}

/* Media Grid for Images */
.full-width-section .media-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr); /* Default to 1 column */
    gap: 1rem;
    margin-bottom: 2rem;
}

/* Responsive Grid (tablet and desktop) */
@media (min-width: 640px) {
    .full-width-section .media-grid {
        grid-template-columns: repeat(2, 1fr); /* Two columns on tablets */
    }
}

@media (min-width: 1040px) {
    .full-width-section .media-grid {
        grid-template-columns: repeat(3, 1fr); /* Three columns on desktop */
    }
}

/* Media Card Styling */
.full-width-section .media-card {
    background: #fff;
    border-radius: 1rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    padding: 1rem;
}

.full-width-section .media-card__image {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.full-width-section .media-card__caption {
    margin-top: 1rem;
    padding: 0.5rem;
    background: #022351;
    color: #fff;
    font-weight: 700;
}

/* Call to Action Button */
.full-width-section .cta-button {
    margin-top: 2rem;
}

.full-width-section .cta-button .button {
    background-color: #0ea5e9;
    color: white;
    padding: 1rem 2rem;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 700;
    display: inline-block;
    transition: background-color 0.3s ease;
}

.full-width-section .cta-button .button:hover {
    background-color: #0c87c1;
}

/* === Gardenieres Everywhere Section === */
body.case-gardenieres #gardenieres-everywhere {
    background-color: #f7f7f7;  /* Match grey background */
    padding: 3rem 1rem;  /* Same spacing as other sections */
    margin: 0 auto;  /* Center the section */
}

/* === Section Heading === */
body.case-gardenieres #gardenieres-everywhere .section-heading {
    font-size: 2rem;
    font-weight: 800;
    text-transform: uppercase;
    color: #0f2a41;
    margin-bottom: 1rem;
}

/* === Section Lead (Intro Text) === */
body.case-gardenieres #gardenieres-everywhere .section-lead {
    font-size: 1.2rem;
    color: #0f2a41;
    margin-bottom: 2rem;  /* Space between intro text and grid */
}

/* === Media Grid === */
body.case-gardenieres #gardenieres-everywhere .media-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
}

/* === Media Card === */
body.case-gardenieres #gardenieres-everywhere .media-card {
    background: #fff;
    border: 1px solid #E7ECF2;
    border-radius: 1rem;
    box-shadow: 0 1px 0 rgba(0,0,0,.02);
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
    overflow: hidden;
    width: 100%;
    flex-basis: 100%; /* Start with full width */
}

body.case-gardenieres #gardenieres-everywhere .media-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(0,0,0,.06);
    border-color: #D8E1EB;
}

@media (min-width: 640px) {
    body.case-gardenieres #gardenieres-everywhere .media-card {
        flex-basis: 48%; /* 2 columns for tablet screens */
    }
}

@media (min-width: 1040px) {
    body.case-gardenieres #gardenieres-everywhere .media-card {
        flex-basis: 31%; /* 3 columns for desktops */
    }
}

/* === Media Card Caption === */
body.case-gardenieres #gardenieres-everywhere .media-card__caption {
    background-color: #f7f7f7;
    padding: 1rem;
    color: #0f2a41;
    font-weight: 700;
    border-radius: 12px;
    text-align: center;
    font-size: 1.1rem;
    margin-top: 1rem;  /* Space between image and caption */
}

/* === Media Card Media Frame === */
body.case-gardenieres #gardenieres-everywhere .media-card__media {
    position: relative;
    width: 100%;
    height: 100%;
    background: none;
}

body.case-gardenieres #gardenieres-everywhere .media-card__media picture,
body.case-gardenieres #gardenieres-everywhere .media-card__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover; /* Ensures the images cover the area without distortion */
    z-index: 1;
}

/* === Play Button (Video Card Only) === */
body.case-gardenieres #gardenieres-everywhere .media-card__media .video-card .play-svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 72px;
    height: 72px;
    pointer-events: none;
    z-index: 6;
}
/* Make sure the thumbnail is always visible and not covered by the modal */
body.case-gardenieres .media-card__media {
  position: relative;
  width: 100%;
  height: 100%;
  background: none;
  z-index: 1;  /* Ensure the thumbnail is on top */
}

/* Ensure the modal is layered correctly and doesn't hide the thumbnail */
body.case-gardenieres .media-modal {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(2,6,23,.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
  z-index: 1000;  /* Ensure it's above everything else */
}

/* Modal content (video) */
body.case-gardenieres .media-modal__dialog {
  position: relative;
  z-index: 1010; /* Ensure the dialog is above the backdrop */
}
/* ============================================================
   Updated Media Grid and Video Styling
   ============================================================ */

/* Media Grid */
body.case-gardenieres .media-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr); /* One column by default */
    gap: 1rem;
    width: 100%; /* Full width */
}

@media (min-width: 640px) {
    body.case-gardenieres .media-grid {
        grid-template-columns: repeat(2, 1fr); /* Two columns on tablet */
    }
}

@media (min-width: 1040px) {
    body.case-gardenieres .media-grid {
        grid-template-columns: repeat(3, 1fr); /* Three columns on desktop */
    }
}

/* Media Card Styling */
body.case-gardenieres .media-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #E7ECF2;
    border-radius: 1rem;
    box-shadow: 0 1px 0 rgba(0,0,0,.02);
    padding: 0;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
    width: 100%;
    overflow: hidden;
}

/* Hover Effect on Media Card */
body.case-gardenieres .media-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(0,0,0,.06);
    border-color: #D8E1EB;
}

/* Media Card Media (Image and Video) */
body.case-gardenieres .media-card__media {
    position: relative;
    width: 100%;
    height: 100%;
    background: none;
}

/* Ensures image fills the container */
body.case-gardenieres .media-card__media img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover; /* Ensures image doesn't get distorted */
}

/* Ensures video thumbnails are centered and responsive */
body.case-gardenieres .media-card__media .video-card {
    position: relative;
    width: 100%;
    height: auto;
}

body.case-gardenieres .media-card__media .video-card img {
    width: 100%;
    height: auto;
    object-fit: cover; /* Ensures the thumbnail covers the space */
}

/* Play Button Styling */
body.case-gardenieres .media-card__media .video-card .play-svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 72px;
    height: 72px;
    pointer-events: none;
    z-index: 6;
}

/* Modal Styles */
body.case-gardenieres .media-modal {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(2,6,23,.6);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
    z-index: 1000;
}

/* Modal Open */
body.case-gardenieres .media-modal.is-open {
    opacity: 1;
    pointer-events: auto;
}

/* Modal Video */
body.case-gardenieres .media-modal__video-wrap iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* Caption Styling (Positioned Below Image) */
body.case-gardenieres .media-card__caption {
    background-color: #f7f7f7;
    padding: 1rem;
    color: #0f2a41;
    font-weight: 700;
    border-radius: 12px;
    text-align: center;
    position: relative;
    z-index: 2; /* Ensure caption stays on top */
    margin-top: 10px; /* Adds a small gap between image and caption */
}

/* Play Button (Correct Centered Button) */
body.case-gardenieres .media-card__media .video-card .play-svg.correct {
    display: block !important;
}

/* Modal Close Button */
body.case-gardenieres .media-modal__close {
    position: absolute;
    top: .5rem;
    right: .5rem;
    background: rgba(0,0,0,.55);
    border: 1px solid rgba(255,255,255,.25);
    color: #fff;
    border-radius: .6rem;
    padding: .4rem .6rem;
    cursor: pointer;
}

/* Adjusting Thumbnail Position on Hover */
body.case-gardenieres .video-card img {
    transition: opacity 0.3s ease;
}

body.case-gardenieres .video-card:hover img {
    opacity: 0.5; /* Dim the image on hover */
}

body.case-gardenieres .video-card:hover .play-svg {
    opacity: 1; /* Show play button on hover */
}

/* ===== Full Width Layout for Gardenieres Everywhere Section ===== */
body.case-gardenieres #gardenieres-everywhere {
    width: 100%;
    padding: 0;
    margin: 0;
    background-color: #f7f7f7; /* Light background similar to case sections */
    padding-top: 20px;
}
.media-card__media img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

body.case-gardenieres .media-card__media img {
    width: 100%;
    height: auto;
    object-fit: cover; /* Ensures image fills container */
}
/* Media Card: Ensure the image is displayed properly */
.media-card__media {
    position: relative;
    aspect-ratio: 16 / 9;
    width: 100%;
    overflow: hidden;
    border-radius: .75rem;
    background: #0F172A; /* Background color */
    z-index: 1; /* Add a lower z-index to the container */
}

/* Image within Media Card */
.media-card__media img {
    position: absolute; /* Position absolute to cover the area */
    inset: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    display: block;
    object-fit: cover; /* Ensure the image fills the container */
    z-index: 2; /* Ensure the image is on top of the container */
}

/* Adjust hover effects and ensure the play button doesn't overlap the image */
.media-card--video .media-card__media img {
    z-index: 3;
}

/* Ensure that video containers don't hide images */
.media-card--video .media-card__media {
    background-color: transparent;
    z-index: 2;
}
.media-card__img {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}
.media-card__img {
    width: 100%;
    height: auto;
}
/* --- Gardenieres: ensure thumbnails actually render --- */
body.case-gardenieres #gardenieres-everywhere .media-card__media {
  /* Give the container a height so abs-pos children have room */
  aspect-ratio: 16 / 9;
  width: 100%;
  position: relative;
  overflow: hidden;
  background: #000; /* optional, looks nice before image paints */
}

/* For thumbnails in this section, DON'T absolutely position the <img> */
body.case-gardenieres #gardenieres-everywhere .media-card__media img {
  position: static !important;   /* override earlier absolute rule */
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;  /* fill the 16:9 frame */
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 1 !important;
}

/* Keep the play button centered above the image */
body.case-gardenieres #gardenieres-everywhere .media-card__media .play-svg {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: 72px;
  height: 72px;
  z-index: 2;
  pointer-events: none;
}

/* Optional: if any global rule hides video-card or its img, undo it here */
body.case-gardenieres #gardenieres-everywhere .video-card,
body.case-gardenieres #gardenieres-everywhere .video-card img {
  display: block !important;
}
body.case-gardenieres #gardenieres-everywhere .media-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
  transition: all .2s ease-in-out;
}

/* --- Match Gardenieres Everywhere header to .section-heading style --- */
body.case-gardenieres #gardenieres-everywhere h2 {
  font-family: 'Barlow', system-ui, sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 1.5rem; /* Matches THE BRIEF heading */
  letter-spacing: -0.02em;
  color: #022351;
  margin: 0 0 0.5rem 0;
  line-height: 1.2;
}
/* Normalize all case-study section headings on the Gardenieres page */
body.case-gardenieres h2.section-heading {
  font-family: 'Barlow', system-ui, sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  font-size: 1.5rem;      /* same size as THE BRIEF */
  line-height: 1.2;
  color: #022351;
  margin: 0 0 .5rem 0;
}

/* Extra insurance: specifically target the Gardenieres Everywhere block */
body.case-gardenieres #gardenieres-everywhere h2.section-heading {
  font-family: 'Barlow', system-ui, sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  font-size: 1.5rem;
  line-height: 1.2;
  color: #022351;
  margin: 0 0 .5rem 0;
}
/* ---- Spacing consistency under THE BRIEF ---- */
body.case-gardenieres #gardenieres-everywhere {
  margin-top: 3rem;       /* adds clean space below THE BRIEF */
  padding-top: 2rem;      /* optional if you want it to sit more comfortably */
  border-top: 1px solid #eaeaea; /* subtle divider, same as other sections */
}
/* Just add breathing room below the previous section */
body.case-gardenieres #gardenieres-everywhere {
  margin-top: 2.5rem;
}

/* =========================================
   Match media card captions to body copy
   ========================================= */
body.case-gardenieres .media-card__caption {
  font-family: 'Barlow', system-ui, sans-serif;
  font-size: 1rem;           /* consistent with paragraph size */
  font-weight: 400;          /* normal weight like body copy */
  line-height: 1.6;
  color: #0f2a41;            /* same ink tone as body text */
  background: #ffffff;       /* remove gray background */
  border-radius: 0 0 12px 12px;
  padding: 1rem 1.25rem;
  text-align: left;
}
/* Stronger, section-scoped caption styles */
body.case-gardenieres #gardenieres-everywhere .media-card .media-card__caption {
  font-family: 'Barlow', system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  color: #0f2a41;
  background: #fff;
  border-radius: 0 0 12px 12px;
  padding: 1rem 1.25rem;
  text-align: left;
}

/* Make sure any links or emphasized text inside the caption inherit body styling */
body.case-gardenieres #gardenieres-everywhere .media-card .media-card__caption a,
body.case-gardenieres #gardenieres-everywhere .media-card .media-card__caption strong,
body.case-gardenieres #gardenieres-everywhere .media-card .media-card__caption em {
  font: inherit;
  color: inherit;
}
/* Space below the Gardenieres Everywhere section */
body.case-gardenieres #gardenieres-everywhere {
  margin-bottom: 4rem; /* adjust: 3rem = subtle, 5rem = looser */
}
/* Align Gardenieres Everywhere under 'The Brief' header */
body.case-gardenieres #gardenieres-everywhere {
  background: #f7f7f7;
  padding: 3rem 3%;             /* matches other sections’ side padding */
  margin: 0 0 4rem 0;           /* spacing below, not centered */
  max-width: none;              /* let it fill same width as other gray blocks */
  box-sizing: border-box;
}

/* Ensure inner heading is left aligned */
body.case-gardenieres #gardenieres-everywhere .section-heading,
body.case-gardenieres #gardenieres-everywhere .section-lead {
  text-align: left;
  margin-left: 0;
}

/* Optional: tighten the grid spacing slightly to match others */
body.case-gardenieres #gardenieres-everywhere .media-grid {
  margin-top: 2rem;
  padding-left: 0;
  padding-right: 0;
}
/* Align Gardenieres Everywhere flush-left with case-section columns */
body.case-gardenieres #gardenieres-everywhere {
  background: #f7f7f7;
  width: 100%;
  padding: 3rem 5%;         /* same horizontal rhythm as case sections */
  margin-top: 2rem;
  margin-bottom: 4rem;
  box-sizing: border-box;
  border-radius: 0;
}

/* Keep headings aligned left and consistent */
body.case-gardenieres #gardenieres-everywhere .section-heading,
body.case-gardenieres #gardenieres-everywhere .section-lead {
  text-align: left;
  margin-left: 0;
}

/* Optional subtle polish: maintain grid alignment within */
body.case-gardenieres #gardenieres-everywhere .media-grid {
  margin-top: 2rem;
  padding-left: 0;
  padding-right: 0;
}
/* Reducing the margin for sections for tighter spacing */
body.case-gardenieres .case-sections {
  margin-bottom: 3rem; /* tweak this to your liking */
}

body.case-gardenieres #gardenieres-everywhere {
  margin-top: 1rem;
}
.case-sections {
  margin-bottom: 40px !important;
}

#gardenieres-everywhere {
  margin-top: 30px !important;
}