/* Stage 10M – compact subpage layout adjustments
 *
 * Many subpages on the DRR DAMSON site were designed with generous
 * spacing to accommodate long-form content. On smaller sections such
 * as the individual pricing pages, portrait landing pages or grawer
 * landings, the oversized paddings and margins can make the layout
 * feel stretched and empty. This stylesheet introduces subtle
 * reductions to paddings and gaps on common card and grid classes to
 * create a tighter, more balanced presentation without altering the
 * underlying design language. These overrides only apply on screens
 * wider than 768 px to preserve comfortable touch spacing on mobile.
 */

@media (min-width: 768px) {
  /* Reduce vertical spacing between cards in generic benefit grids */
  .benefits-grid,
  .steps-grid,
  .drr-topic-grid,
  .drr-stage8a-grid,
  .drr-stage7x-cluster-grid {
    gap: 1rem;
  }

  /* Compact the padding around cards and list items */
  .benefit-card,
  .step,
  .drr-topic-card,
  .drr-stage8a-card,
  .drr-stage7x-cluster-card {
    padding: 1rem;
    margin: 0.5rem;
  }

  /* Reduce spacing on FAQ/accordion sections */
  .drr-topic-faq details {
    padding: 0.75rem 0;
  }

  /* Harmonise list spacing within content blocks */
  .drr-topic-content ul,
  .drr-topic-content ol {
    margin: 0 0 0.75rem 1.25rem;
  }

  /* Tweak horizontal padding on section wrappers to avoid overly wide
     content zones. Each page defines its own wrapper class; these
     selectors target the common ones used on pricing and landing
     pages. */
  .section-wrapper,
  .pricing-wrapper,
  .landing-wrapper,
  .topic-wrapper {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  /* Shrink heading margins for a more cohesive vertical rhythm */
  h2,
  h3,
  h4 {
    margin-top: 1rem;
    margin-bottom: 0.75rem;
  }

  /* Override inline padding/margin on generic card sections used in legal
     and policy pages (regulamin, zwroty i reklamacje, polityka RODO).
     These pages originally embed <section class="card" style="padding:22px;margin-bottom:18px;">
     which results in oversized spacing on desktop. By declaring the rules with
     !important we ensure they take precedence over the inline styles. */
  .card {
    padding: 1rem !important;
    margin-bottom: 1rem !important;
    /* Limit the maximum width of large policy cards on desktop and center
       them. Without this constraint the full-width sections can feel
       overwhelmingly wide on big screens. The width is capped to
       900px; you can adjust this value depending on your aesthetic. */
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
  }
}