/* ==========================================================================
   VivreFR Global Tools Responsive Breakpoints - Version 1.07.576
   File: responsive.css
   Purpose: Centralized responsive media queries across all interactive tools
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tablet Viewport Range  (768px – 1024px)
   -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1024px) {
  .pp-page-wrapper,
  .vf-page-wrapper {
    padding: 32px 24px;
  }

  .pp-container,
  .vf-container {
    padding: 0 20px;
  }

  .pp-card,
  .vf-card {
    padding: 36px 28px;
  }

  .pp-hero,
  .vf-hero {
    margin-bottom: 36px;
  }

  .pp-main-title,
  .vf-main-title {
    font-size: clamp(2rem, 4.5vw, 2.8rem);
  }
}


/* --------------------------------------------------------------------------
   Mobile Viewport Range  (@media < 768px)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .pp-page-wrapper,
  .vf-page-wrapper {
    padding: 24px 8px;
  }

  .pp-container,
  .vf-container {
    padding: 0 4px;
  }

  .pp-hero,
  .vf-hero {
    margin-bottom: 28px;
  }

  .pp-main-title,
  .vf-main-title {
    font-size: 26px;
    line-height: 1.25;
  }

  .pp-section h2,
  .vf-section h2 {
    font-size: 18px;
    margin-bottom: 14px;
  }

  .pp-meta,
  .vf-meta {
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
  }

  .pp-divider,
  .vf-divider {
    display: none;
  }

  .pp-card,
  .vf-card {
    padding: 32px 24px;
    border-radius: 18px;
  }

  .pp-grid,
  .vf-grid-2 {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .vf-options-grid {
    grid-template-columns: 1fr;
  }

  .vf-options,
  .vf-radio-group {
    flex-direction: column;
  }

  .vf-options label,
  .vf-radio-label {
    width: 100%;
  }

  .vf-scorecard-calc,
  .vf-summary-card {
    padding: 32px 20px;
  }

  .vf-info-banner {
    padding: 24px;
  }

  .vf-field {
    margin-bottom: 32px;
  }

  .vf-field:last-child {
    margin-bottom: 0;
  }

  .vf-label-spacer {
    display: none;
  }

  .vf-scorecard-value,
  .vf-metric-value {
    font-size: 42px;
  }
}