/* styles.scss */

.quarto-juxtapose-container {
  width: 100%;
  
  /* This is the key to preventing layout collapse and overlap */
  /* It maintains a 16:9 ratio. Adjust as needed for your images. */
  aspect-ratio: 16 / 9; 
  
  /* You can add a fallback for older browsers if needed */
  /* height: 500px; */

  margin-top: 1rem;
  margin-bottom: 1rem;
}

/* Optional: Make the credit text a bit smaller */
.jx-credit {
  font-size: 0.8em;
}

.logo-cloud {
display: flex;
flex-wrap: wrap;
justify-content: center; /* Centers items horizontally */
align-items: center;     /* Centers items vertically */
gap: 2rem;               /* Space between logos */
}

.logo-cloud img {
max-height: 50px;       /* Control the height so they match */
width: auto;             /* Allow width to adjust naturally */
/*filter: grayscale(100%); /* Optional: makes them all grey until hovered */
opacity: 0.7;
transition: all 0.3s ease;
}

/* Optional: Color on hover */
/*
.logo-cloud img:hover {
filter: grayscale(0%);
opacity: 1;
}
*/

.logo-cloud {
display: flex;
flex-wrap: wrap;
justify-content: center; /* Centers items horizontally */
align-items: center;     /* Centers items vertically */
gap: 2rem;               /* Space between logos */
}

.logo-cloud img {
max-height: 50px;       /* Control the height so they match */
width: auto;             /* Allow width to adjust naturally */
/*filter: grayscale(100%); /* Optional: makes them all grey until hovered */
opacity: 0.7;
transition: all 0.3s ease;
}

/* Optional: Color on hover */
/*
.logo-cloud img:hover {
filter: grayscale(0%);
opacity: 1;
}
*/

/* Create a specific class for full-screen embed sections */
.cr-section.full-screen-embed {

/* 1. Force the sticky container to fill the viewport */
.cr-sticky {
  width: 100vw !important;      /* Force full viewport width */
  height: 100vh !important;     /* Force full viewport height */
  max-width: none !important;   /* Override Quarto's container limits */
  
  /* Reset positioning to ensure it hits the edges */
  top: 0 !important;
  left: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: auto !important;

  /* 2. Style the iframe itself to fill that container */
  iframe {
    width: 100%;
    height: 100%;
    display: block;       /* Removes tiny generic inline spacing */
    border: none;
    pointer-events: auto; /* Re-enable clicking inside the iframe */
  }
}
}

/* 1. Container that enforces the aspect ratio */
.embed-container-16x9 {
position: relative;
width: 100vw;              /* Force full viewport width */
height: 0;
padding-bottom: 75%;    /* 16:9 Aspect Ratio or 4/3 Aspect Ratio (9/16 = 0.5625, 3/4 = 0.75) */ 

/* Breakout logic to ensure it ignores parent margins */
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;

overflow: hidden;          /* Hide any overflow */
}

/* 2. The iframe fills the container */
.embed-container-16x9 iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}

/* 1. Let mouse events pass through the structural containers */
.cr-section, .narrative-col {
pointer-events: none;
}

/* 2. Re-enable mouse events for the actual narrative bubbles */
.narrative-col > div {
pointer-events: auto;
}

/* 3. The Magic Bullet: Hide the parent wrapper Closeread generates around our spacer */
/* Updated to catch the class whether it is the container itself OR a child */
.cr-step.clear-view-step,
.cr-step:has(.clear-view-step),
.narrative-col > div.clear-view-step,
.narrative-col > div:has(.clear-view-step),
.clear-view-step {
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;

/* Aggressive fallbacks to kill the bubble aesthetics */
background: transparent !important;
box-shadow: none !important;
border: none !important;
backdrop-filter: none !important;
}

/* 4. Force all web apps to ignore mouse events by default */
.cr-interactive-app {
pointer-events: none !important; 
z-index: 1 !important; /* Keep it low when locked */
}

/* 5. The class that our JavaScript will use to unlock the specific app */
.cr-interactive-app.is-interactive {
pointer-events: auto !important;

/* Push the active app to the absolute front so subsequent sections cannot block clicks */
z-index: 9999 !important; 
}