/* ==========================================================================
   AGRIYANA — Mobile density

   The home page measured **15,694px tall at 390px wide**. Nothing was broken;
   everything was simply built at desktop proportions and then stacked, so a
   phone had to scroll through fourteen screens of mostly padding.

   Worst offenders, measured:

     The Agriyana Line   2180px   ten 106px nodes with 32px gaps between them
     Seller band         1284px   four perk cards stacked one per row
     Section padding      ~64px   top and bottom, on every one of twelve sections

   This file is about density, not about hiding things. Nothing is removed on a
   phone that is present on a desktop — it is packed properly instead.

   Loads last.
   ========================================================================== */

@media (max-width: 700px) {

  /* --------------------------------------------------------- section rhythm
     64px above and below twelve sections is 1536px of nothing. 40 is still a
     clear break between one idea and the next at this width. */
  :root { --sec-y: 40px; --sec-y-sm: 28px; }
  .section { padding-block: var(--sec-y); }

  .sec-head { margin-bottom: var(--s-5); gap: var(--s-3); }
  .sec-head h2 { font-size: var(--t-xl); }
  .sec-num { margin-bottom: var(--s-2); }
  .sec-rule { margin-bottom: var(--s-4); }

  /* --------------------------------------------------------- the Line
     Ten stacked cards is the single tallest thing on the page. Each one is
     a step number, a label and a one-line description — it does not need
     106px and 32px of air after it.

     The connecting rail stays: without it the stages stop reading as a
     sequence and become a list, which is the one thing this diagram exists
     not to be. */
  .flow-stage { gap: var(--s-3) !important; }

  .flow-node {
    min-height: 0 !important;
    padding: var(--s-3) var(--s-4) var(--s-3) var(--s-6) !important;
    border-radius: var(--r-ctl);
  }
  .fn-top { margin-bottom: 2px; }
  .fn-step { font-size: 9px; }
  .fn-icon { width: 18px; height: 18px; }
  .fn-label { font-size: var(--t-sm); }
  .fn-sub {
    font-size: var(--t-2xs);
    line-height: 1.35;
    /* one line: the full detail is in the readout below, which is what the
       stage opens anyway */
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .flow-caption { font-size: var(--t-2xs); }
  .flow-head { margin-bottom: var(--s-5); }
  .flow-readout { padding: var(--s-4); gap: var(--s-3); }

  /* --------------------------------------------------------- seller band */
  .seller-grid { gap: var(--s-6); }
  /* two-up: these are four short labelled facts, not four paragraphs */
  .seller-perks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); margin-top: var(--s-5); }
  .seller-perk { grid-template-columns: 1fr; gap: var(--s-2); padding: var(--s-3); }
  .seller-perk .ico { width: 18px; height: 18px; }
  .seller-perk b { font-size: var(--t-xs); }
  .seller-perk span span { font-size: 10.5px; line-height: 1.4; }

  /* --------------------------------------------------------- split blocks */
  .split { gap: var(--s-6); }
  .split-media img { aspect-ratio: 16 / 10; object-fit: cover; }

  /* --------------------------------------------------------- credentials */
  .cred { padding: var(--s-4); }
  .cred p { font-size: var(--t-xs); }

  /* --------------------------------------------------------- usp strip */
  .usp { gap: var(--s-2); grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .usp-item { grid-template-columns: 32px minmax(0, 1fr); gap: var(--s-3); padding: var(--s-3); }
  .usp-ico { width: 32px; height: 32px; border-radius: 9px; }
  .usp-ico .ico { width: 16px; height: 16px; }
  .usp-item b { font-size: var(--t-xs); }
  .usp-item span span { font-size: 10px; }

  /* --------------------------------------------------------- steps + facts */
  .steps { gap: var(--s-4); }
  .step { padding-left: 46px; }
  .step h3 { font-size: var(--t-base); }
  .facts { gap: var(--s-3); }
  .fact { padding: var(--s-4); }

  /* --------------------------------------------------------- seasonal */
  .season-tabs { gap: 6px; margin-bottom: var(--s-4); }
  .season-tab { padding-inline: var(--s-4); font-size: var(--t-xs); }

  /* --------------------------------------------------------- footer */
  .site-footer { padding-top: var(--s-8); padding-bottom: var(--s-5); }
  .foot-grid { gap: var(--s-6); }
  .foot-line { margin-top: var(--s-6); padding-top: var(--s-4); flex-direction: column; align-items: flex-start; gap: var(--s-2); }

  /* --------------------------------------------------------- hero */
  .hero-split { padding-block: var(--s-5) var(--s-6); }
  .hero-split-in { gap: var(--s-7); }
  .hero-media-col { margin-bottom: var(--s-5); }
  .hero-lede { margin-bottom: var(--s-5); }
  .hero-ctl { margin-top: var(--s-5); padding-top: var(--s-4); }
  .hero-stats { margin-top: var(--s-6); }
  .hero-stat { padding: var(--s-4); }
  .hero-stat dd { font-size: var(--t-xl); }

  /* --------------------------------------------------------- machinery band */
  .mach-foot { margin-top: var(--s-5); padding-top: var(--s-5); gap: var(--s-4); }
  .mach-note { font-size: var(--t-xs); }
  .mach-foot .btn { width: 100%; justify-content: center; }
}


/* ==========================================================================
   Second pass — the two remaining tall sections

   After the first pass the machinery band was the tallest thing on the page at
   2521px: four spec cards in a single column, each with a 1:1 media box that at
   full width is a 354px square. The picture was taller than everything else on
   the card put together.

   Two-up instead. The product card already works at 164px on this width, and
   the spec card carries less: a model chip, a picture, a two-line title, one
   fact line and a price.
   ========================================================================== */

@media (max-width: 700px) {
  .spec-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--s-3);
  }
  .spec-card-media { aspect-ratio: 1 / 1; }
  .spec-card-body { padding: var(--s-3); gap: 2px; }
  .spec-card-body h3 { font-size: var(--t-sm); }
  .spec-facts { font-size: 9.5px; }
  .spec-model { font-size: 8.5px; padding: 4px 7px; top: 7px; left: 7px; }
  .spec-seal { width: 24px; height: 24px; top: 6px; right: 6px; }
  .spec-seal .ico { width: 13px; height: 13px; }
  .spec-card-foot { padding-top: var(--s-3); flex-direction: column; align-items: stretch; gap: var(--s-2); }
  .spec-card-foot .add-btn { width: 100%; }

  /* the produce rail and category tiles carry the same square-media problem */
  .cat-card { min-height: 200px; padding: var(--s-4); }
  .cat-card h3 { font-size: var(--t-md); }
  .cat-card p { font-size: var(--t-xs); margin-bottom: var(--s-3); }
}

/* 360, not 400: at 390px a two-up strip still gives each cell about 168px,
   which holds a short label and a sentence. Below 360 it genuinely does not. */
@media (max-width: 400px) {
  .seller-perks,
  .usp { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 359px) {
  .seller-perks,
  .usp,
  .spec-grid { grid-template-columns: 1fr !important; }
}