/* ==========================================================================
   RURALTECH LAYOUT PROPORTIONS V1
   STEP-C1-HOME

   Additive geometry policy only.

   Desktop services-band refinement:
   - preserve content
   - preserve interactions
   - preserve hero/header/footer geometry
   - reduce horizontal and vertical visual mass
   ========================================================================== */

@media (min-width: 992px) {

  /*
   * STEP C2-R1
   *
   * Static geometry offset.
   *
   * Do NOT use transform here:
   * RT-LIVING-FABRIC-V5F deliberately keeps the
   * information plane at transform:none!important.
   */
  .hero__content {
    position: relative;

    top: -24px;
  }


  /*
   * STEP C1
   * Desktop services-band refinement.
   */
  .services {
    width: 100%;
    max-width: 1200px;

    min-height: 64px;

    margin-left: auto;
    margin-right: auto;

    padding:
      18px 22px;
  }

}


/* ==========================================================================
   C3-COMPACT-DESKTOP

   Observed at 1024x768:
   natural wrapping produces an unbalanced 5 + 1 service layout.

   Preserve content and typography.
   Reorganize only the enhanced service triggers into a deliberate 3 x 2
   composition in the narrow desktop transition zone.
   ========================================================================== */

@media (min-width: 992px) and (max-width: 1100px) {

  /*
   * C3-R1
   * Compensate only for the extra height introduced by
   * the deliberate two-row compact-desktop service layout.
   */
  .hero__content {
    top: -40px;
  }


  .services {
    padding-top: 12px;
    padding-bottom: 12px;
  }


  .services__inner.rt-services-ready {
    display: grid;

    grid-template-columns:
      repeat(3, max-content);

    justify-content: center;
    align-items: center;

    column-gap: 18px;
    row-gap: 6px;
  }


  .rt-service-trigger {
    justify-self: center;

    white-space: nowrap;
  }


  .rt-service-separator {
    display: none;
  }


  .contact {
    margin-top: 12px;
  }

}


/* ==========================================================================
   C4-RESPONSIVE-HOME

   Responsive continuation of the established desktop geometry.

   No content mutation.
   No service-name mutation.
   No Hero Copy / JS mutation.
   ========================================================================== */


/* --------------------------------------------------------------------------
   TABLET / MOBILE-LANDSCAPE TRANSITION
   641 .. 991.98

   Avoid natural 5+1 wrapping.
   -------------------------------------------------------------------------- */

@media (min-width: 641px) and (max-width: 991.98px) {

  .services__inner.rt-services-ready {
    display: grid;

    grid-template-columns:
      repeat(3, max-content);

    justify-content: center;
    align-items: center;

    column-gap: 18px;
    row-gap: 7px;
  }


  .rt-service-trigger {
    justify-self: center;

    white-space: nowrap;
  }


  .rt-service-separator {
    display: none;
  }

}


/* --------------------------------------------------------------------------
   MOBILE
   <=640

   Preserve natural label widths.
   Remove separators that become orphaned during wrapping.
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {

  .services {
    padding-left: 16px;
    padding-right: 16px;
  }


  .services__inner.rt-services-ready {
    display: flex;

    flex-wrap: wrap;

    justify-content: center;
    align-items: center;

    column-gap: 12px;
    row-gap: 8px;
  }


  .rt-service-trigger {
    flex: 0 0 auto;

    white-space: nowrap;
  }


  .rt-service-separator {
    display: none;
  }

}


/* --------------------------------------------------------------------------
   NARROW MOBILE
   <=420

   The canonical Hero Copy remains one line.
   Typography alone adapts to the available width.

   JS/typewriter sequencing remains untouched.
   -------------------------------------------------------------------------- */

@media (max-width: 420px) {

  .tagline {
    font-size:
      clamp(
        24px,
        7vw,
        29px
      );

    line-height: 1.2;
  }

}


/* ==========================================================================
   C4-R1-NARROW-MOBILE

   Supersedes only the <=640 mobile service-flow rules introduced by C4.

   Principles:
   - deterministic 2 x 3 service composition
   - readable labels instead of intrinsic-width wrapping
   - one-line canonical Hero Copy retained
   - short viewports use scroll/normal flow rather than content loss
   ========================================================================== */


/* --------------------------------------------------------------------------
   MOBILE SERVICES
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {

  .services {
    padding-left: 16px;
    padding-right: 16px;
  }


  .services__inner.rt-services-ready {
    display: grid;

    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    align-items: center;

    column-gap: 10px;
    row-gap: 8px;
  }


  .rt-service-trigger {
    width: 100%;
    min-width: 0;

    justify-self: stretch;

    white-space: normal;

    text-align: center;

    line-height: 1.35;
  }


  .rt-service-separator {
    display: none;
  }

}


/* --------------------------------------------------------------------------
   NARROW HERO COPY

   Keep the canonical phrase horizontal.
   Reduce typography only as much as needed to fit the viewport.
   -------------------------------------------------------------------------- */

@media (max-width: 420px) {

  /*
   * C4-R2
   *
   * Apply narrow typography to both the paragraph and the
   * actual Typewriter text carrier.
   */
  .tagline,
  .tagline__inner {
    font-size:
      clamp(
        18px,
        4.8vw,
        20px
      );

    line-height: 1.2;
  }

}


/* --------------------------------------------------------------------------
   SHORT MOBILE VIEWPORT

   A very short viewport cannot contain header + complete hero content +
   Contact Reveal + fixed footer without either clipping or destructive
   compression.

   In this regime only:
   - allow normal vertical document flow
   - preserve all content
   - footer returns to normal flow
   -------------------------------------------------------------------------- */

@media (max-width: 640px) and (max-height: 600px) {

  html,
  body {
    height: auto;
    min-height: 100%;
  }


  body {
    overflow-y: auto;
  }


  .hero {
    height: auto;

    min-height:
      calc(
        100vh - 67.953125px
      );

    padding-bottom: 24px;
  }


  .footer {
    position: static;

    left: auto;
    right: auto;
    bottom: auto;
  }

}