/*-- -------------------------- -->
<---      Priser (local)        -->
<--- -------------------------- -*/
/* The pricing cards themselves are styled globally in root.css (.pricing-grid /
   .price-card). This file only lays out the page-level container + heading. */
@media only screen and (min-width: 0em) {
  #priser-page {
    padding: clamp(3.75rem, 7vw, 6rem) 1rem;
  }
  #priser-page .priser-container {
    width: 92%;
    max-width: 80rem;
    margin: auto;
  }
  #priser-page .section-head {
    text-align: center;
    margin-bottom: 3.5rem;
  }
  #priser-page .section-head .section-intro {
    margin: 0 auto;
  }
  #priser-page .section-head .button-solid {
    margin-top: 1.25rem;
  }
}

/*-- -------------------------- -->
<---      FAQ (accordion)       -->
<--- -------------------------- -*/
@media only screen and (min-width: 0em) {
  #faq {
    background: var(--bg-soft);
    padding: clamp(3.75rem, 7vw, 6rem) 1rem;
  }
  #faq .faq-container {
    width: 92%;
    max-width: 50rem;
    margin: auto;
  }
  #faq .section-head {
    text-align: center;
    margin-bottom: 3rem;
  }
  #faq .faq-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  #faq .faq-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    overflow: hidden;
    transition: border-color .3s;
  }
  #faq .faq-item.open {
    border-color: var(--primary);
  }
  #faq .faq-q {
    margin: 0;
  }
  /* The whole question row is the button */
  #faq .faq-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    text-align: left;
    background: transparent;
    border: none;
    padding: 1.25rem 1.5rem;
    font-family: inherit;
    font-size: 1.08rem;
    font-weight: 700;
    color: var(--text);
    transition: color .3s;
  }
  #faq .faq-trigger:hover {
    color: var(--primary);
  }
  /* Keyboard focus ring for accessibility */
  #faq .faq-trigger:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
  }
  #faq .faq-icon {
    flex-shrink: 0;
    display: inline-flex;
    color: var(--primary);
    transition: transform .3s ease;
  }
  #faq .faq-item.open .faq-icon {
    transform: rotate(180deg);
  }
  /* Smooth expand/collapse via the grid-rows 0fr→1fr technique */
  #faq .faq-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .3s ease;
  }
  #faq .faq-item.open .faq-panel {
    grid-template-rows: 1fr;
  }
  #faq .faq-panel-inner {
    overflow: hidden;
  }
  #faq .faq-panel-inner p {
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1.7;
    padding: 0 1.5rem 1.4rem;
  }
}