/* ===========================
   FILLER VIDEO
   =========================== */

.filler-video {
      container-type: inline-size;
      container-name: filler-video;
      position: relative;
      width: 100%;
      height: 50vh;
      min-height: 320px;
      max-height: 600px;
      overflow: hidden;
      padding: 0;
    }

    .filler-video__bg {
      position: absolute;
      inset: -80px;
      z-index: 0;
      pointer-events: none;
    }

    .filler-video__iframe {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border: 0;
      /* Scale up to fill container and hide YouTube letterboxing */
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      min-width: calc(100% + 160px);
      min-height: calc(100% + 160px);
    }

    .filler-video__overlay {
      position: absolute;
      inset: 0;
      z-index: 1;
      background:
        linear-gradient(
          to bottom,
          var(--bg-body) 0%,
          transparent 18%,
          transparent 82%,
          var(--bg-body) 100%
        );
      pointer-events: none;
    }

    /* Container Queries */
    @container filler-video (max-width: 768px) {
      .filler-video {
        height: 40vh;
        min-height: 260px;
      }
    }

    @container filler-video (max-width: 480px) {
      .filler-video {
        height: 35vh;
        min-height: 200px;
      }
    }

/* ===========================
   FILLER GEOMETRIC
   =========================== */

.filler-geometric {
      container-type: inline-size;
      container-name: filler-geometric;
      position: relative;
      width: 100%;
      min-height: 28vh;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--primary);
      overflow: hidden;
      padding: var(--space-4xl) var(--section-padding-x);
    }

    /* Decorations Container */
    .filler-geometric__decor {
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
    }

    /* Grid Lines */
    .filler-geometric__grid {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      opacity: 0.08;
    }

    .filler-geometric__grid line {
      stroke: var(--light);
      stroke-width: 0.15;
    }

    /* Shapes */
    .filler-geometric__shape {
      position: absolute;
    }

    /* Squares */
    .filler-geometric__shape--square-1 {
      top: 15%;
      left: 8%;
      width: 60px;
      height: 60px;
      border: 1px solid var(--light-20);
      transform: rotate(15deg);
      animation: floatRotate 20s ease-in-out infinite;
    }

    .filler-geometric__shape--square-2 {
      bottom: 20%;
      right: 12%;
      width: 80px;
      height: 80px;
      border: 1px solid var(--light-15);
      transform: rotate(-10deg);
      animation: floatRotate 25s ease-in-out infinite reverse;
    }

    /* Lines */
    .filler-geometric__shape--line-1 {
      top: 30%;
      right: 25%;
      width: 120px;
      height: 1px;
      background: var(--light-20);
      transform: rotate(-25deg);
    }

    .filler-geometric__shape--line-2 {
      bottom: 35%;
      left: 20%;
      width: 80px;
      height: 1px;
      background: var(--light-15);
      transform: rotate(35deg);
    }

    /* Corner Brackets */
    .filler-geometric__shape--corner-1 {
      top: 20%;
      right: 8%;
      width: 30px;
      height: 30px;
      border-top: 1px solid var(--light-30);
      border-right: 1px solid var(--light-30);
    }

    .filler-geometric__shape--corner-2 {
      bottom: 25%;
      left: 10%;
      width: 30px;
      height: 30px;
      border-bottom: 1px solid var(--light-25);
      border-left: 1px solid var(--light-25);
    }

    /* Dot Cluster */
    .filler-geometric__shape--dot-cluster {
      top: 60%;
      right: 18%;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
    }

    .filler-geometric__shape--dot-cluster span {
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: var(--light-20);
    }

    @keyframes floatRotate {
      0%, 100% {
        transform: rotate(15deg) translateY(0);
      }
      50% {
        transform: rotate(20deg) translateY(-10px);
      }
    }

    /* Content */
    .filler-geometric__content {
      position: relative;
      z-index: 2;
      width: 100%;
    }

    .filler-geometric__stats {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--space-3xl);
    }

    .filler-geometric__stat {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--space-xs);
      text-align: center;
    }

    .filler-geometric__divider {
      width: 1px;
      height: 80px;
      background: var(--light-20);
    }

    .filler-geometric__number {
      font-family: var(--font-primary);
      font-size: clamp(3rem, 6vw, 5rem);
      font-weight: 200;
      line-height: 1;
      letter-spacing: -0.02em;
      color: var(--light);
    }

    .filler-geometric__label {
      font-family: var(--font-primary);
      font-size: var(--text-s);
      font-weight: 400;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--light-70);
    }

    /* Container Queries */
    @container filler-geometric (max-width: 968px) {
      .filler-geometric__stats {
        gap: var(--space-2xl);
      }

      .filler-geometric__divider {
        height: 60px;
      }
    }

    @container filler-geometric (max-width: 768px) {
      .filler-geometric {
        min-height: auto;
        padding: var(--space-3xl) var(--section-padding-x);
      }

      .filler-geometric__stats {
        flex-direction: column;
        gap: var(--space-xl);
      }

      .filler-geometric__divider {
        width: 60px;
        height: 1px;
      }

      .filler-geometric__shape--square-1 { width: 45px; height: 45px; }
      .filler-geometric__shape--square-2 { width: 60px; height: 60px; }
      .filler-geometric__shape--line-1 { width: 80px; }
      .filler-geometric__shape--line-2 { width: 60px; }
    }

    @container filler-geometric (max-width: 480px) {
      .filler-geometric {
        padding: var(--space-2xl) var(--section-padding-x);
      }

      .filler-geometric__stats {
        gap: var(--space-l);
      }

      .filler-geometric__divider {
        width: 40px;
      }

      .filler-geometric__shape--square-1,
      .filler-geometric__shape--square-2,
      .filler-geometric__shape--corner-1,
      .filler-geometric__shape--corner-2 {
        display: none;
      }

      .filler-geometric__label {
        font-size: var(--text-xs);
      }
    }

/* ===========================
   FILLER IMAGE
   =========================== */

.filler-image {
      container-type: inline-size;
      container-name: filler-image;
      position: relative;
      width: 100%;
      height: 40vh;
      min-height: 280px;
      max-height: 500px;
      overflow: hidden;
      padding: 0;
    }

    .filler-image__bg {
      position: absolute;
      inset: 0;
      z-index: 0;
    }

    .filler-image__img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }

    .filler-image__overlay {
      position: absolute;
      inset: 0;
      z-index: 1;
      background: linear-gradient(
        to bottom,
        var(--bg-body) 0%,
        transparent 15%,
        transparent 85%,
        var(--bg-body) 100%
      );
      pointer-events: none;
    }

    /* Container Queries */
    @container filler-image (max-width: 768px) {
      .filler-image {
        height: 35vh;
        min-height: 220px;
      }
    }

    @container filler-image (max-width: 480px) {
      .filler-image {
        height: 30vh;
        min-height: 180px;
      }
    }