/* Sidespecifik CSS for Main/garanti.html.
   Laa foer i en <style>-blok inde i selve HTML-filen, hvor den var
   usynlig for en soegning i stilarket. Indholdet er ordret det samme,
   og linket staar samme sted i dokumentet, saa kaskaden er uaendret. */

/* Garanti page – redesigned */

    /* ── Wide guarantee section layout ───────────── */
    .garanti-section-card {
      display: grid;
      grid-template-columns: 260px 1fr;
      gap: 5rem;
      align-items: center;
      max-width: 980px;
      margin: 0 auto;
    }
    .garanti-section-card__left {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 1.25rem;
      position: sticky;
      top: 6rem;
    }
    .garanti-icon-wrap {
      width: 96px;
      height: 96px;
      border-radius: 50%;
      background: linear-gradient(135deg, rgba(212,175,55,0.14), rgba(212,175,55,0.05));
      border: 2px solid rgba(212,175,55,0.35);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .garanti-section-number {
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--accent-gold);
      background: rgba(212,175,55,0.1);
      border: 1px solid rgba(212,175,55,0.25);
      padding: 0.3rem 1rem;
      border-radius: 50px;
    }
    .garanti-section-title {
      font-size: 1.7rem;
      font-weight: 700;
      color: var(--text-dark);
      line-height: 1.3;
      margin: 0;
    }
    .garanti-section-card__right > p {
      color: var(--text-muted);
      line-height: 1.8;
      margin-bottom: 1.25rem;
      font-size: 1.05rem;
    }

    @media (max-width: 768px) {
      .garanti-section-card {
        grid-template-columns: 1fr;
        gap: 2rem;
      }
      .garanti-section-card__left {
        position: static;
        flex-direction: row;
        text-align: left;
        flex-wrap: wrap;
        align-items: center;
      }
      .garanti-icon-wrap { width: 64px; height: 64px; flex-shrink: 0; }
      .garanti-section-title { font-size: 1.4rem; flex-basis: 100%; }

      /* Feedback grid: collapse to 1 column on mobile */
      .feedback-grid {
        grid-template-columns: 1fr !important;
        gap: 1.25rem !important;
      }
    }

    @media (max-width: 600px) {
      .garanti-section-card {
        gap: 1.5rem;
      }
      .garanti-section-card__left {
        gap: 0.75rem;
      }
      .garanti-section-title { font-size: 1.25rem; }
    }