/* PGI Scale System — Fluid Typography & Layout
 * Based on container query width (vw) scaling.
 * All sections act as containers. Headings and text scale
 * proportionally with their container width. No breakpoints needed.
 *
 * Usage: Add class="pgi-container" to any section or wrapper.
 * Headings inside will scale automatically.
 */

/* ============================================
   CONTAINER SETUP
   ============================================ */

/* Scaling uses vw (viewport width) not vw to avoid
   container-type: inline-size breaking section layouts.
   clamp() provides min/max caps. */

/* ============================================
   FLUID HEADING SIZES (vw-based)
   ============================================
   Scale smoothly with viewport width.
   clamp(minimum, preferred, maximum)

   h1: Hero headlines        — large, dominant
   h2: Section headlines     — prominent
   h3: Sub-section headlines — medium
   h4: Card/feature titles   — compact
   h5: Labels/eyebrows       — small
   h6: Captions              — smallest
*/

h1 {
  font-size: clamp(2.7rem, 5.5vw, 4.5rem);
}

h2 {
  font-size: clamp(2.5rem, 4.5vw, 4rem);
}

h3 {
  font-size: clamp(2.5rem, 3.8vw, 3rem);
}

h4 {
  font-size: clamp(2rem, 2.5vw, 2rem);
}

h5 {
  font-size: clamp(1rem, 2vw, 1.5rem);
}

h6 {
  font-size: clamp(0.875rem, 1.5vw, 1.25rem);
}

/* ============================================
   HEADING STYLE (shared)
   ============================================
   Font family, weight, stretch, line-height, etc.
   Applied via .hero__title or directly on headings.
*/

h1, h2, h3, h4, h5, h6 {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #000000;
}

/* Testimonial quote override */
h4.testimonial-quote {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
}

/* Testimonial card paragraph spacing */
#carousel-track p {
  padding-top: 1rem;
}

/* ============================================
   BODY TEXT SCALING
   ============================================ */

.pgi-text-large {
  font-size: clamp(1rem, 1.5vw, 1.3rem);
  line-height: 1.7;
}

.pgi-text-main {
  font-size: clamp(0.9rem, 1.2vw, 1.15rem);
  line-height: 1.7;
}

.pgi-text-small {
  font-size: clamp(0.8rem, 1vw, 1rem);
  line-height: 1.6;
}

/* ============================================
   BUTTON STYLE ONE (shared across all heroes)
   ============================================
   Default: solid black, text = section bg color
   Hover: transparent, black outline, black text

   Per-section text color set via --btn-text-color
   on the section or via modifier class.
*/

.btn-learn {
  display: inline-block;
  padding: 12px 32px;
  border: 2px solid #000000 !important;
  background: #000000 !important;
  color: var(--btn-text-color, var(--hero-bg)) !important;
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: clamp(0.85rem, 1.2vw, 1rem);
  font-weight: 500;
  text-decoration: none;
  border-radius: 12px;
  transition: background 0.2s, color 0.2s;
  cursor: pointer;
}

.btn-learn:hover {
  background: transparent !important;
  color: #000000 !important;
}


/* ============================================
   SECTION LAYOUT HELPERS
   ============================================ */

/* Full-height section */
.pgi-hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 80px 30px;

}

/* Two-column with image (image right) */
.pgi-hero-split {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 30%;
  overflow: hidden;

}

/* Two-column with image (image left) */
.pgi-hero-split-reverse {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 30% 1fr;
  overflow: hidden;

}

/* Card grid — 3 columns */
.pgi-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

/* Card grid — 2 columns */
.pgi-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

/* Card base */
.pgi-card {
  border: 2px solid #000000;
  border-radius: 16px;
  padding: 20px 15px;
}

/* ============================================
   RESPONSIVE (container queries only)
   ============================================
   Stacks grids to single column on narrow containers.
   No @media — purely container-based.
*/

/* Sections must be full width, no horizontal overflow */
section {
  width: 100%;
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
}

body {
  overflow-x: hidden;
  width: 100%;
}

.page-content {
  overflow-x: hidden;
  width: 100%;
  /* Uniform top padding on every page-content wrapper. Pushes content below the fixed navbar. */
  padding-top: 6rem;
}

@media (max-width: 768px) {
  .pgi-grid-3 {
    grid-template-columns: 1fr;
  }
  .pgi-grid-2 {
    grid-template-columns: 1fr;
  }
  .pgi-hero-split,
  .pgi-hero-split-reverse {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   COLOR SYSTEM
   ============================================
   Each section sets its own --btn-text-color
   to match its background for button text.
*/

/* Section background colors as CSS variables */
:root {
  --hero-bg: #fff194;
  --hero2-bg: #68b7bf;
  --hero3-bg: #daebcb;
  --hero4-bg: #f5f0e8;
  --hero5-bg: #e8e0d4;
  --hero6-bg: #c9d6c3;
}

/* ============================================
   ACCESSIBILITY HELPERS
   ============================================ */

/* Visually hidden — accessible but invisible */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}