Bootstrap Components

<section class="row g-4">
      <div class="col-xl-8">
        <article class="athena-card p-4 h-100">
          <div class="d-flex flex-wrap justify-content-between align-items-start gap-3 mb-3">
            <div>
              <span class="badge text-bg-primary mb-3">Bootstrap 5.3</span>
              <h2 class="h4">Foundation Components</h2>
              <p class="text-secondary mb-0">Athena uses Bootstrap for the stable control layer, then adds its own admin shell, tokens, spacing, and component patterns.</p>
            </div>
            <a class="btn btn-outline-primary" href="https://getbootstrap.com/" rel="noopener">Bootstrap Homepage</a>
          </div>
          <div class="row g-3">
            <div class="col-md-6">
              <label class="form-label" for="bootstrap-demo-email">Email Address</label>
              <input id="bootstrap-demo-email" class="form-control" type="email" value="avery@example.com">
            </div>
            <div class="col-md-6">
              <label class="form-label" for="bootstrap-demo-plan">Plan</label>
              <select id="bootstrap-demo-plan" class="form-select">
                <option>Design System</option>
                <option>Admin Suite</option>
                <option>Enterprise</option>
              </select>
            </div>
            <div class="col-12">
              <div class="btn-toolbar gap-2" role="toolbar" aria-label="Bootstrap button examples">
                <button class="btn btn-primary" type="button">Primary</button>
                <button class="btn btn-outline-secondary" type="button">Secondary</button>
                <button class="btn btn-success" type="button">Confirm</button>
                <button class="btn btn-danger" type="button">Delete</button>
              </div>
            </div>
          </div>
        </article>
      </div>
      <div class="col-xl-4">
        <article class="athena-card p-4 h-100">
          <span class="badge text-bg-success mb-3">Utilities</span>
          <h2 class="h5">Responsive Grid</h2>
          <p class="text-secondary">Bootstrap rows and columns provide predictable wrapping from mobile to desktop.</p>
          <div class="athena-demo-frame">
            <div class="row g-2">
              <div class="col-12 col-sm-6"><div class="athena-demo-box">col-sm-6</div></div>
              <div class="col-12 col-sm-6"><div class="athena-demo-box">col-sm-6</div></div>
              <div class="col-12"><div class="athena-demo-box">col-12</div></div>
            </div>
          </div>
        </article>
      </div>
      <div class="col-lg-6">
        <article class="athena-card p-4 h-100">
          <h2 class="h5">Accordion</h2>
          <p class="text-secondary">Disclosure controls use Bootstrap state management and native button semantics.</p>
          <div class="accordion" id="bootstrapFeatureAccordion">
            <div class="accordion-item">
              <h3 class="accordion-header">
                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#bootstrapCollapseOne" aria-expanded="true" aria-controls="bootstrapCollapseOne">Accessible Components</button>
              </h3>
              <div id="bootstrapCollapseOne" class="accordion-collapse collapse show" data-bs-parent="#bootstrapFeatureAccordion">
                <div class="accordion-body">Buttons, modals, dropdowns, tabs, and accordions expose keyboard-friendly behaviour out of the box.</div>
              </div>
            </div>
            <div class="accordion-item">
              <h3 class="accordion-header">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bootstrapCollapseTwo" aria-expanded="false" aria-controls="bootstrapCollapseTwo">Theme Integration</button>
              </h3>
              <div id="bootstrapCollapseTwo" class="accordion-collapse collapse" data-bs-parent="#bootstrapFeatureAccordion">
                <div class="accordion-body">Athena layers light, dark, and contrast themes over Bootstrap variables.</div>
              </div>
            </div>
          </div>
        </article>
      </div>
      <div class="col-lg-6">
        <article class="athena-card p-4 h-100">
          <h2 class="h5">Modal And Dropdown</h2>
          <p class="text-secondary">Interactive Bootstrap features are loaded locally from the vendored bundle.</p>
          <div class="d-flex flex-wrap gap-2">
            <button class="btn btn-primary" type="button" data-bs-toggle="modal" data-bs-target="#bootstrapDemoModal">Open Modal</button>
            <div class="dropdown">
              <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Actions</button>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="../docs/quick-start.html">Quick Start</a></li>
                <li><a class="dropdown-item" href="../docs/accessibility.html">Accessibility Notes</a></li>
                <li><a class="dropdown-item" href="../docs/security.html">Security Notes</a></li>
              </ul>
            </div>
          </div>
        </article>
      </div>
    </section>

    <div class="modal fade" id="bootstrapDemoModal" tabindex="-1" aria-labelledby="bootstrapDemoModalTitle" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h2 class="modal-title h5" id="bootstrapDemoModalTitle">Bootstrap Modal</h2>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            Focus is moved into the dialog, trapped while open, and returned to the trigger when closed.
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Done</button>
          </div>
        </div>
      </div>
    </div>