/* 
BACKWARD COMPATIBILITY VERSION - general-compatible.css
This file demonstrates improved backward compatibility fixes for older browsers.
Key improvements:
1. Removed native CSS nesting - converted to traditional selectors
2. Removed :has() selectors - rely on class-based approaches or JavaScript
3. Added fallbacks for aspect-ratio
4. Replaced inset shorthand with individual properties
5. Replaced subgrid with traditional grid layouts

NOTE: This is a reference file showing key compatibility improvements.
To use: Replace sections in your main general.css or link this as a fallback stylesheet.
*/

/* ========================================
   ASPECT-RATIO FALLBACKS (Older browsers only)
   ======================================== */

/* Only apply these rules if aspect-ratio is not supported */
@supports not (aspect-ratio: 1) {
  .related.upcoming figure {
    margin: 0;
    width: 100%;
    height: auto;
    /* aspect-ratio: 4 / 3.8; */
    padding-bottom: 95%; /* 3.8/4 = 0.95 = 95% */
    position: relative;
    overflow: hidden;
  }

  .related.upcoming figure img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .related-container.past .exhibitions-container figure {
    margin: 0;
    width: 100%;
    height: auto;
    /* aspect-ratio: 6 / 4; */
    padding-bottom: 66.67%; /* 4/6 = 0.6667 = 66.67% */
    position: relative;
    overflow: hidden;
  }

  .related-container.past .exhibitions-container figure img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .search-results .search-thumb {
    margin: 0;
    /* aspect-ratio: 4 / 3; */
    padding-bottom: 75%; /* 3/4 = 0.75 = 75% */
    position: relative;
    overflow: hidden;
  }

  .search-results .search-thumb img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
}

/* ========================================
   INSET REPLACEMENT (Older browsers only)
   ======================================== */

/* Only apply these rules if inset shorthand is not supported */
@supports not (inset: 0) {
  /* Replace: .search-modal { inset: 0; } */
  .search-modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2100;
  }

  /* Replace: .search-modal__backdrop { inset: 0; } */
  .search-modal__backdrop {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: var(--search-backdrop);
  }

  /* Replace: .video-background { inset: 0; } */
  .video-background {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
  }
}

/* ========================================
   CSS NESTING CONVERSION (Older browsers only)
   ======================================== */

/* Only apply these rules if CSS nesting is not supported */
@supports not (selector(&)) {
  .single-exhibition .hero {
    position: relative;
    width: 100vw;
    height: 100vh;
    max-height: 100vh;
    display: flex;
    flex-direction: column;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    color: var(--hero-text-color, inherit);
    --hero-ui-surface: rgba(253,247,240,0.84);
    --hero-ui-surface-strong: rgba(253,247,240,0.96);
    --hero-ui-border: rgba(35,31,32,0.20);
    --hero-ui-shadow: rgba(35,31,32,0.14);
    --hero-ui-close-icon: url(../images/close_k.svg);
  }

  .single-exhibition .inside-hero {
    position: relative;
    width: 100%;
    height: 100%;
    width: 100vw;
    height: 100vh;
    max-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .single-exhibition .hero .hero-image {
    height: 50%;
    width: auto;
    position: absolute;
    z-index: 0;
    top: 52%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .single-exhibition .hero .hero-image img {
    width: auto;
    height: 100%;
  }

  .single-exhibition .hero h1,
  .single-exhibition .hero .exhibition-date,
  .single-exhibition .hero .on-page-nav,
  .single-exhibition .hero .on-page-nav a,
  .single-exhibition .hero .on-page-nav button {
    color: inherit;
  }

  .single-exhibition .hero h1,
  .single-exhibition .hero .exhibition-date {
    font-family: var(--font-heading);
    font-size: var(--hero-exhibition-size);
    line-height: var(--hero-exhibition-ln);
    text-align: center;
  }

  .single-exhibition .hero h1 {
    max-width: 21ch;
    margin-top: 6rem;
  }

  .single-exhibition .hero .exhibition-date {
    max-width: 17ch;
  }

  .single-exhibition .on-page-nav {
    position: fixed;
    left: 2rem;
    bottom: 2rem;
    color: inherit;
    z-index: 99999;
  }

  .single-exhibition .on-page-nav li {
    max-width: 30ch;
    line-height: 100%;
  }

  .single-exhibition .on-page-nav a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 2px;
  }

  .single-exhibition .on-page-nav button {
    font-family: var(--font-heading);
    font-size: var(--font-size);
    text-transform: none;
    background-color: var(--hero-ui-surface);
    color: inherit;
    border: 1px solid var(--hero-ui-border);
    box-shadow: 0 1rem 2.5rem var(--hero-ui-shadow);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    padding: 2px 5px;
  }

  .single-exhibition .on-page-nav ul,
  .single-exhibition .on-page-nav li {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .single-exhibition .on-page-nav li {
    padding-left: 1rem;
    padding-right: 1rem;
    margin-bottom: 0.5rem;
  }

  .single-program .hero,
  .single-collection .hero {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    padding-top: 9rem;
    background-color: var(--program-hero-bg-light, #FFFFFF);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    color: var(--hero-text-color, inherit);
    --hero-ui-surface: rgba(253,247,240,0.84);
    --hero-ui-surface-strong: rgba(253,247,240,0.96);
    --hero-ui-border: rgba(35,31,32,0.20);
    --hero-ui-shadow: rgba(35,31,32,0.14);
    --hero-ui-close-icon: url(../images/close_k.svg);
  }

  .single-program .inside-hero,
  .single-collection .inside-hero {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .single-program .inside-hero header,
  .single-collection .inside-hero header {
    display: flex;
    flex-direction: column-reverse;
    margin-top: auto;
    width: calc(100% - 6rem);
  }

  .single-program .program-information,
  .single-collection .program-information {
    display: flex;
    width: 100%;
    justify-content: space-between;
  }

  .single-program .program-information .program-types span:not(:last-child)::after,
  .single-collection .program-information .program-types span:not(:last-child)::after {
    content: ', ';
  }

  .single-program .hero .hero-image,
  .single-collection .hero .hero-image {
    height: 50%;
    width: auto;
    margin-bottom: auto;
    text-align: center;
    padding-bottom: 3rem;
  }

  .single-program .hero .hero-image img,
  .single-collection .hero .hero-image img {
    width: 100%;
    height: auto;
    max-width: 650px;
  }

  .single-program .hero h1,
  .single-program .hero .program-types,
  .single-program .hero .program-types span,
  .single-program .hero .program-date,
  .single-program .hero .rsvp-notice,
  .single-program .hero .rsvp-notice a,
  .single-program .hero .rsvp-notice p,
  .single-program .hero .on-page-nav,
  .single-program .hero .on-page-nav a,
  .single-program .hero .on-page-nav button,
  .single-program .hero figcaption,
  .single-collection .hero h1,
  .single-collection .hero .program-types,
  .single-collection .hero .program-types span,
  .single-collection .hero .program-date,
  .single-collection .hero .rsvp-notice,
  .single-collection .hero .rsvp-notice a,
  .single-collection .hero .rsvp-notice p,
  .single-collection .hero .on-page-nav,
  .single-collection .hero .on-page-nav a,
  .single-collection .hero .on-page-nav button,
  .single-collection .hero figcaption {
    color: inherit;
  }

  .single-program .hero h1,
  .single-collection .hero h1 {
    font-family: var(--font-heading);
    font-size: var(--font-lg);
    line-height: var(--ln-lg);
    max-width: 65ch;
    margin-top: 6rem;
    max-width: 950px;
    margin-left: auto;
    margin-right: auto;
  }

  .single-program .hero .program-date,
  .single-collection .hero .program-date {
    font-size: var(--subtitle-size);
    line-height: var(--subtitle-ln);
    text-align: center;
  }

  .single-program .on-page-nav,
  .single-collection .on-page-nav {
    position: fixed;
    z-index: 99999;
    left: 2rem;
    bottom: 2rem;
    color: inherit;
  }

  .single-program .on-page-nav li,
  .single-collection .on-page-nav li {
    max-width: 30ch;
    line-height: 100%;
  }

  .single-program .on-page-nav a:hover,
  .single-collection .on-page-nav a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 2px;
  }

  .single-program .on-page-nav button,
  .single-collection .on-page-nav button {
    font-family: var(--font-heading);
    font-size: var(--font-size);
    text-transform: none;
    background-color: var(--hero-ui-surface);
    color: inherit;
    border: 1px solid var(--hero-ui-border);
    border-radius: 999px;
    box-shadow: 0 1rem 2.5rem var(--hero-ui-shadow);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    padding: 2px 5px;
  }

  .single-program .on-page-nav ul,
  .single-program .on-page-nav li,
  .single-collection .on-page-nav ul,
  .single-collection .on-page-nav li {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .single-program .on-page-nav li,
  .single-collection .on-page-nav li {
    padding-left: 1rem;
    padding-right: 1rem;
    margin-bottom: 0.5rem;
  }

  .single-program .container,
  .single-collection .container {
    margin-top: 2rem;
  }

  .single-program .detail-section .inside-section-container.row,
  .single-collection .detail-section .inside-section-container.row {
    border: 1px solid;
    padding: 2rem;
    max-width: 1200px;
    margin: 0 auto 2rem;
    gap: 4rem;
  }

  .single-program .detail-section,
  .single-collection .detail-section {
    padding: 2rem;
  }

  .single-program .detail-section p.section-heading,
  .single-collection .detail-section p.section-heading {
    font-family: var(--font-heading);
    margin-bottom: 0;
  }

  .single-program .detail-section ul,
  .single-program .detail-section li,
  .single-collection .detail-section ul,
  .single-collection .detail-section li {
    list-style: none;
    margin: 0;
    line-height: normal;
    font-size: var(--font-size);
  }

  .single-program .detail-section ul,
  .single-collection .detail-section ul {
    padding-left: 1rem;
  }

  .single-program .detail-section a,
  .single-collection .detail-section a {
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1.5px;
  }

  .single-program .detail-section li a[target="_blank"]::after,
  .single-collection .detail-section li a[target="_blank"]::after {
    font-family: var(--font-graphics);
    content: "\2197";
    margin-left: 4px;
    font-size: 0.85em;
    display: inline-block;
    vertical-align: middle;
  }

  .single-program .detail-section .acknowledgments p:first-child,
  .single-collection .detail-section .acknowledgments p:first-child {
    text-indent: 1rem;
  }

  .single-program .detail-section .acknowledgments p:last-child,
  .single-collection .detail-section .acknowledgments p:last-child {
    margin: 0;
  }
}

/* ========================================
   GUIDE SECTION - REMOVE SUBGRID (Older browsers only)
   ======================================== */

/* Only apply these rules if subgrid is not supported */
@supports not (grid-template-rows: subgrid) {
  /* Instead of using subgrid, use traditional grid or flexbox */
  .guide-section .inside-section-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }

  .guide-section .inside-section-container:has(.guide:only-child) {
    display: flex;
    justify-content: center;
  }

  .guide-section .guide {
    display: flex;
    flex-direction: column;
    /* Removed: grid-row: span 5; */
    /* Removed: grid-template-rows: subgrid; */
  }

  .guide-section .guide:only-child {
    max-width: 600px;
    display: block;
  }
}

/* ========================================
   :HAS() SELECTOR ALTERNATIVES (Older browsers only)
   ======================================== */

/* Only apply these rules if :has() selector is not supported */
@supports not (selector(:has(*))) {
  /* Instead of: .inside-section-container { &:has(h2:not(.screen-reader-text)) { border-top: 1px solid; } } 
     Add a class in HTML or use JavaScript to add it conditionally */

  .inside-section-container.has-heading {
    border-top: 1px solid;
  }

  /* Instead of: .inside-section-container:has(.pub-guides):has(.collection-container) .collection-container { margin-top: 12rem; }
     Add a class to apply this styling */

  .inside-section-container.has-pub-guides .collection-container {
    margin-top: 12rem;
  }

  /* Instead of: a.menu-post-container figure:has(figcaption) { margin-bottom: 0; }
     Target it directly when the structure is known */

  a.menu-post-container figure.has-caption {
    margin-bottom: 0;
  }

  /* Instead of: .full-content-section.section-container .inside-section-container p:has(iframe) { text-align: center; }
     Use a class or target the iframe directly */

  .full-content-section.section-container .inside-section-container p.has-iframe {
    text-align: center;
  }

  .full-content-section.section-container .inside-section-container p.has-iframe iframe {
    text-align: center;
  }

  /* Instead of: .full-content-section p:has(.medium) { margin: 4rem 0; }
     Use a class */

  .full-content-section p.has-medium {
    margin: 4rem 0;
  }

  /* Instead of: .full-content-section sup:has(.footnote-ref) { ... }
     Target the sup with a class */

  .full-content-section sup.has-footnote-ref {
    display: inline-flex;
    border: 1px solid;
    width: 2.4rem;
    height: 2.4rem;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
  }

  /* Instead of: .bottom-notes:has(.further-reading), .bottom-notes:has(.footnote-container) { display: block; }
     Add a class */

  .bottom-notes.has-content {
    display: block;
  }

  /* Instead of: .gallery-more.list:has(.collection-item) { ... }
     Add a class */

  .gallery-more.list.has-collection {
    grid-column: span 2;
    grid-template-columns: 1fr 1fr;
  }

  /* Instead of: .related-container.upcoming.programs .programs-container:has(> .related-program:first-child:last-child) { ... }
     This requires JavaScript or server-side logic to add a class */

  .programs-container.single-item {
    grid-template-columns: 1fr;
    max-width: calc((100% - 4rem) / 3);
    margin-left: auto;
    margin-right: auto;
  }

  .programs-container.two-items {
    grid-template-columns: 1fr 1fr;
    max-width: calc((((100% - 4rem) / 3) * 2) + 2rem);
    margin-left: auto;
    margin-right: auto;
  }

  /* Instead of: .staff-container h2:has(.title) span.name::after { content: ','; }
     Add a class to the span or header */

  .staff-container h2.has-title span.name::after {
    content: ',';
  }

  /* Instead of: .festival-hero:has(.act-well-animation) .festival-hero-image { ... }
     Add a class to the parent */

  .festival-hero.has-animation .festival-hero-image {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
  }

  .festival-hero.has-animation .festival-hero-image img {
    max-height: 65vh;
    max-width: 100%;
    width: auto;
    height: auto;
  }

  .single-festival .hero.has-animation .hero-image {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
  }

  .single-festival .hero.has-animation .hero-image img {
    max-height: 65vh;
    max-width: 100%;
    width: auto;
    height: auto;
  }
}

/* ========================================
   HELPER RECOMMENDATIONS
   ======================================== */

/* Add these classes to your HTML via JavaScript or server-side logic:
   
   - .has-heading (on .inside-section-container when it contains h2)
   - .has-caption (on figure when it contains figcaption)
   - .has-iframe (on p when it contains iframe)
   - .has-medium (on p when it contains span.medium)
   - .has-footnote-ref (on sup when it contains .footnote-ref)
   - .has-content (on .bottom-notes when it has children)
   - .has-collection (on .gallery-more.list when it has .collection-item)
   - .single-item (on .programs-container with only one child)
   - .two-items (on .programs-container with two children)
   - .has-title (on .staff-container h2 when it has .title)
   - .has-animation (on .festival-hero or .single-festival .hero when it contains .act-well-animation)
   
   Recommended approach: Use JavaScript to add these classes on page load:
   
   document.querySelectorAll('.inside-section-container').forEach(el => {
     if (el.querySelector('h2:not(.screen-reader-text)')) {
       el.classList.add('has-heading');
     }
   });
*/