/*
 * Native <dialog>-based replacement for Bootstrap's Modal component (CON-1277 Phase 6, Bootstrap-JS
 * removal prioritized ahead of cosmetic nav/header/footer work). Base recipe ported from the vendored
 * Scss/bootstrap/_modal.scss (".modal"/".modal-dialog"/".modal-content"/".modal-header"/".modal-body"),
 * values read from the compiled output.
 *
 * IMPORTANT correction (found late, after the first version of this file shipped): this project DID
 * have its own real override for these exact two modals all along -- "#modal-virtualization,
 * #modal-aready { .modal-title{...} .modal-header{...} .close{...} }" in THIS SAME FILE
 * (product-detail.css, migrated in an earlier session before this modal rebuild), missed entirely
 * during the initial port because it was never grepped for (it's native CSS already, not SCSS, so
 * the "grep the whole Scss tree" sweep never looked at it). That block is now DELETED from
 * product-detail.css (dead/orphaned -- it targeted ".modal-title"/".modal-header"/".close", classes
 * the new markup below no longer uses) and its real values are folded in here instead:
 * - the title's real font is "var(--font-family-serif)" ("Adelle W02 SemiBold"), size 1.25rem, with
 *   a 10px top margin -- NOT the plain Bootstrap "<h5>" default (17px/Avenir) this file wrongly
 *   reproduced at first.
 * - the header has NO border-bottom for these two modals specifically (overriding Bootstrap's
 *   generic 1px solid #e9eaeb).
 * - the close button has an explicit 26x26px size -- ITS ABSENCE was a real bug: an SVG icon with
 *   only a "viewBox" (no width/height) collapses to 0x0 inside a flex header without an explicit
 *   size on its container, so the close button was invisible before this fix.
 *
 * ".modal"/".modal-dialog"/".modal-content" etc. are used ONLY by these two modals sitewide (grepped
 * across every template/partial) -- safe to drop entirely in favor of new, non-Bootstrap class names
 * without touching anything else. Native <dialog> already provides what ".modal" (fixed full-screen
 * overlay) + ".modal-dialog" (inner centered box) used to provide together -- browsers center a
 * <dialog> shown via showModal() automatically, so there's no need for that two-level wrapper
 * anymore, just one element with the old ".modal-content" look directly.
 *
 * ".embed-responsive"/".embed-responsive-16by9"/".embed-responsive-item" (used inside the modal body
 * for the video aspect-ratio wrapper) ARE reproduced below (found during the "styles.css" removal
 * audit, 2026-07-23: its only other source, vendorized Bootstrap SCSS, was deleted whole in Phase 7,
 * be3c1d33). con_products' LinkedImage.html also carries an ".embed-responsive-item" class on its
 * YouTube video, but without the ".embed-responsive"/"-16by9" wrapper divs -- that usage never
 * matched this ruleset's descendant selectors even before Phase 7, so it's unaffected either way.
 * Only the 16:9 ratio is ported -- the only variant these two modals (or anything else project-wide)
 * actually use; Bootstrap's 21:9/4:3/1:1 variants had zero real consumers.
 *
 * No entrance/exit animation (Bootstrap's old ".fade"/"show" slide-down transform) -- dropped as a
 * minor, deliberately-not-reproduced flourish, consistent with other rebuilds this session (e.g.
 * ".product-tabs" not reproducing the old Bootstrap-container-nesting width quirk).
 *
 * ".product-modal__title" is deliberately NOT a real heading element (was "<h5>" under the old
 * Bootstrap markup, briefly "<h2>" in an earlier version of this port -- both rejected by the user:
 * no semantic heading at all here, real or fake-numbered, since a modal title isn't really part of
 * the page's document outline). It's a "<p>", same pattern as ".productCard__header" elsewhere in
 * this project -- connected to the dialog via "aria-labelledby"/"id", which works with any element,
 * not just real headings. Because it's a "<p>" and not a real "h1"/"h2", typography.css's sitewide
 * heading rules don't apply to it at all -- only Bootstrap's own unlayered "p { margin-bottom: 1rem;
 * }" reset (and the per-level "h5" font reset, no longer relevant now that it isn't a heading)
 * used to compete. Bootstrap is fully removed (Phase 7); no plain "p" rule exists anywhere in the
 * project now, verified live -- "margin" no longer needs "!important".
 */
@layer organisms {
  dialog.product-modal {
    padding: 0;
    width: auto;
    margin: auto;
    border: 1px solid rgba(0, 0, 0, 0.2);
    background-color: #fff;
    background-clip: padding-box;
  }
  /* Scoped to "[open]" deliberately -- an unconditional "display:flex" here would beat the browser's
     own UA-stylesheet rule "dialog:not([open]) { display:none; }" (author-origin rules always win
     over UA-origin ones, regardless of @layer), leaving the dialog visible even when closed. */
  dialog.product-modal[open] {
    display: flex;
    flex-direction: column;
  }
  dialog.product-modal::backdrop {
    background-color: rgba(0, 0, 0, 0.5);
  }
  @media (min-width: 576px) {
    dialog.product-modal {
      max-width: 500px;
    }
  }
  @media (min-width: 992px) {
    dialog.product-modal {
      max-width: 800px;
    }
  }
  .product-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
    border-bottom: none;
  }
  .product-modal__title {
    color: var(--color-primary-orange);
    font-family: var(--font-family-serif);
    font-size: 1.25rem;
    line-height: 1.5;
    margin: 0;
    margin-top: 10px;
  }
  .product-modal__body {
    position: relative;
    flex: 1 1 auto;
    padding: 15px;
  }
  .product-modal__close {
    float: right;
    width: 26px;
    height: 26px;
    font-size: 1.5rem;
    font-weight: bold;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: 0.5;
    padding: 0;
    cursor: pointer;
    background: transparent;
    border: 0;
    appearance: none;
  }
  .product-modal__close:focus,
  .product-modal__close:hover {
    color: var(--color-primary-anthracite);
    text-decoration: none;
    cursor: pointer;
    opacity: 0.8;
  }
  .embed-responsive {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    overflow: hidden;
  }
  .embed-responsive::before {
    display: block;
    content: "";
    padding-top: 56.25%;
  }
  .embed-responsive .embed-responsive-item,
  .embed-responsive video {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }
}