/* ==========================================================================
   protonsalesmy.com — MODEL PAGES DESIGN ENHANCEMENT LAYER
   Loaded for every page except home, AFTER Elementor + proton-brand.css.

   Scope rules (locked):
   - NO copywriting changes — text nodes are never rewritten here.
   - NO new image assets — existing assets only, repositioned/styled.
   - Layout, spacing, typography, card treatment, motion only.
   ========================================================================== */

:root {
  --ppe-r-sm: 10px;
  --ppe-r: 16px;
  --ppe-r-lg: 22px;
  --ppe-ink: #141B26;
  --ppe-body: #4A5768;
  --ppe-muted: #6B7A8D;
  --ppe-line: #E5E8EE;
  --ppe-soft: #F6F8FA;
  --ppe-shadow-1: 0 1px 2px rgba(16, 24, 40, .05), 0 6px 18px -14px rgba(16, 24, 40, .3);
  --ppe-shadow-2: 0 20px 42px -20px rgba(16, 24, 40, .34);
  --ppe-ease: cubic-bezier(.22, 1, .36, 1);
}

/* --------------------------------------------------------------------------
   1. SAFETY — buttons fit their text, never stretch or overflow
   -------------------------------------------------------------------------- */
.elementor-button { width: auto; max-width: 100%; }

/* --------------------------------------------------------------------------
   2. SECTION RHYTHM — consistent breathing room around content grids,
      light canvas so white cards actually read as cards
   -------------------------------------------------------------------------- */
.e-con.e-parent:has(.e-grid) > .e-con-inner {
  padding-block: clamp(30px, 4.6vw, 68px);
}

.e-con.e-parent:has(.e-grid) {
  background-image: linear-gradient(180deg, #FFFFFF 0%, #F6F8FA 100%);
}

/* --------------------------------------------------------------------------
   3. SPEC / FEATURE GRID  ->  premium cards
   Tiles are Elementor containers (.e-con.e-child) holding image + heading.
   -------------------------------------------------------------------------- */
.e-grid > .e-con.e-child:has(.elementor-widget-image) {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--ppe-line);
  border-radius: var(--ppe-r);
  overflow: hidden;
  box-shadow: var(--ppe-shadow-1);
  transition: transform .5s var(--ppe-ease), box-shadow .5s var(--ppe-ease), border-color .5s var(--ppe-ease);
}

.e-grid > .e-con.e-child:has(.elementor-widget-image) > .elementor-widget-image,
.e-grid > .e-con.e-child:has(.elementor-widget-image) > .elementor-widget-image > .elementor-widget-container {
  width: 100%;
  margin: 0;
}

.e-grid > .e-con.e-child:has(.elementor-widget-image) .elementor-widget-image img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: var(--ppe-media-ar, 4 / 3);
  object-fit: cover;
  transition: transform .7s var(--ppe-ease);
}

.e-grid > .e-con.e-child:has(.elementor-widget-image) > .elementor-widget-heading {
  margin-top: auto;
  padding: 13px 16px 15px;
  border-top: 1px solid var(--ppe-line);
  background: #fff;
}

.e-grid > .e-con.e-child:has(.elementor-widget-image) > .elementor-widget-heading .elementor-heading-title {
  margin: 0;
  font-weight: 600;
  color: var(--ppe-ink);
  font-size: clamp(13.5px, 1.05vw, 16px) !important;
  line-height: 1.3;
  letter-spacing: .1px;
}

@media (hover: hover) and (pointer: fine) {
  .e-grid > .e-con.e-child:has(.elementor-widget-image):hover {
    transform: translateY(-6px);
    box-shadow: var(--ppe-shadow-2);
    border-color: #D8DDE6;
  }

  .e-grid > .e-con.e-child:has(.elementor-widget-image):hover .elementor-widget-image img {
    transform: scale(1.05);
  }
}

/* Desktop grids: avoid orphan tiles in the last row.
   Exactly 4 tiles -> single clean row of 4. Exactly 8 -> two rows of 4. */
@media (min-width: 1025px) {
  .e-grid:has(> .e-con.e-child:nth-child(4)):not(:has(> .e-con.e-child:nth-child(5))) {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .e-grid:has(> .e-con.e-child:nth-child(8)):not(:has(> .e-con.e-child:nth-child(9))) {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* Icon grids: keep the graphic at icon scale, centred, with air around it */
.e-grid.ppe-icons > .e-con.e-child:has(.elementor-widget-image) .elementor-widget-image img {
  object-fit: contain;
  padding: clamp(14px, 9%, 30px);
}

/* --------------------------------------------------------------------------
   4. STAT TILES (h2 number + label)  ->  soft cards, brand-red numbers
   -------------------------------------------------------------------------- */
.e-grid .e-con.e-child:has(> .elementor-widget-heading):has(> .elementor-widget-text-editor) {
  background: #fff;
  border: 1px solid var(--ppe-line);
  border-radius: var(--ppe-r);
  padding: clamp(14px, 1.7vw, 24px) clamp(10px, 1.4vw, 22px);
  gap: 2px;
  justify-content: center;
  text-align: center;
  box-shadow: var(--ppe-shadow-1);
}

.e-grid .e-con.e-child:has(> .elementor-widget-heading):has(> .elementor-widget-text-editor) .elementor-heading-title {
  color: var(--proton-red, #E60019);
  font-size: clamp(26px, 3.2vw, 40px) !important;
  line-height: 1.02;
  letter-spacing: -.8px;
  font-variant-numeric: tabular-nums;
}

.e-grid .e-con.e-child:has(> .elementor-widget-heading):has(> .elementor-widget-text-editor) p {
  margin: 0;
  color: var(--ppe-muted);
  font-size: clamp(11.5px, .95vw, 14px);
  line-height: 1.35;
  letter-spacing: .2px;
}

/* --------------------------------------------------------------------------
   5. DARK STATEMENT BAND — the source used a background VIDEO whose src never
      survives the scrape, leaving a large empty black area. Replace with a
      deliberate brand-gradient band (no new asset, no copy change).
   -------------------------------------------------------------------------- */
.e-con.e-parent:has(> .e-con-inner > .elementor-background-video-container) {
  background-color: #06070C !important;
  background-image:
    radial-gradient(115% 130% at 50% -10%, rgba(28, 18, 64, .95) 0%, rgba(8, 7, 15, .96) 55%, #05060B 100%),
    linear-gradient(180deg, #06070C, #05060B) !important;
  padding-block: clamp(40px, 5.6vw, 96px) !important;
  /* source hard-codes a 590px min-height tuned for the (missing) bg video,
     which leaves a large empty black area once the video is gone */
  min-height: clamp(250px, 30vw, 430px) !important;
}

.elementor-background-video-container,
.elementor-background-video-hosted {
  display: none !important;
}

.e-con.e-parent:has(> .e-con-inner > .elementor-background-video-container) .elementor-heading-title {
  font-size: clamp(30px, 5.4vw, 62px) !important;
  line-height: 1.03;
  letter-spacing: -.5px;
  font-weight: 800;
  color: #fff;
}

/* --------------------------------------------------------------------------
   6. MOBILE — denser, faster to scan
   Feature grids with many tiles go 2-up instead of one giant column.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .e-grid:has(> .e-con.e-child:nth-child(4)) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .e-grid > .e-con.e-child:has(.elementor-widget-image) {
    border-radius: 12px;
  }

  .e-grid > .e-con.e-child:has(.elementor-widget-image) > .elementor-widget-heading {
    padding: 10px 11px 12px;
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .e-grid > .e-con.e-child:has(.elementor-widget-image) > .elementor-widget-heading .elementor-heading-title {
    font-size: 12.8px !important;
    line-height: 1.28;
    text-align: center;
    overflow-wrap: break-word;
    hyphens: auto;
  }

  .e-con.e-parent:has(.e-grid) > .e-con-inner {
    padding-block: 26px;
  }

  .e-grid .e-con.e-child:has(> .elementor-widget-heading):has(> .elementor-widget-text-editor) {
    padding: 14px 8px;
  }

  .e-con.e-parent:has(> .e-con-inner > .elementor-background-video-container) {
    min-height: 260px !important;
  }
}

/* --------------------------------------------------------------------------
   7. MOTION — subtle reveal for grid tiles (JS adds .is-in).
      Reduced-motion users get the static layout.
   -------------------------------------------------------------------------- */
.ppe-reveal {
  opacity: 0;
  transform: translateY(16px);
}

.ppe-reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity .62s var(--ppe-ease), transform .62s var(--ppe-ease);
}

@media (prefers-reduced-motion: reduce) {
  .ppe-reveal,
  .ppe-reveal.is-in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .e-grid > .e-con.e-child:has(.elementor-widget-image) {
    transition: none;
  }
}