/* ==========================================================================
   Jobson Garden — Responsive Styles
   Full cross-device adaptability: Mobile, Tablet, Desktop, Landscape.
   Load order: tokens.css, main.css, responsive.css, animations.css.
   ========================================================================== */

/* --- Global Device Guardrails --------------------------------------------- */

/* The height the bottom bar occupies on a phone, including the gap under it.
   Anything that has to sit clear of the bar measures from this. */
:root { --bottom-nav-h: 5.4rem; }

html {
  -webkit-text-size-adjust: 100%;
}

body {
  overflow-x: clip; /* clip preserves position: sticky! */
  width: 100%;
}

/* Ensure all images scale fluidly */
img, canvas, svg {
  max-width: 100%;
}

/* Minimum 44px touch targets on interactive controls */
.site-nav a,
.bottom-nav__link,
.btn {
  touch-action: manipulation;
}

/* --- Tablets & Laptops (max-width: 1024px) -------------------------------- */

@media (max-width: 1024px) {
  .site-header__inner {
    gap: var(--space-4);
    max-width: 100%;
  }
  .brand {
    flex: 0 0 130px;
    width: 130px;
  }
  .site-header__actions {
    flex: 0 0 130px;
    width: 130px;
  }
  .site-nav ul {
    gap: 0.25rem;
  }
  .site-nav a {
    padding: 0.4rem 0.75rem;
    font-size: 0.86rem;
  }

  .hero-scroll {
    height: 260vh;
  }
  .hero-scroll__card {
    max-width: 36rem;
    padding: 2.5rem 2.25rem;
  }
  .hero-scroll__title {
    font-size: clamp(2.5rem, 5vw, 4rem);
  }

  .steps {
    grid-template-columns: repeat(2, 1fr);
  }
  .plants {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
  }
  .site-footer__inner {
    grid-template-columns: 1fr 1fr;
  }
}

/* --- Mobile Breakpoint (max-width: 768px) ---------------------------------- */

@media (max-width: 768px) {
  :root {
    --section-y: var(--space-12);
  }

  /* Header adjustments for mobile */
  .site-header {
    top: 0.75rem;
    padding-inline: 0.75rem;
  }
  .site-header__inner {
    height: 3.5rem;
    padding: 0 0.85rem;
    gap: 0.75rem;
    border-radius: 1rem;
    max-width: 100%;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(44, 95, 56, 0.22);
    box-shadow: 0 4px 18px -2px rgba(44, 95, 56, 0.12), 0 2px 6px rgba(26, 35, 27, 0.04);
  }
  .brand {
    flex: 0 0 auto;
    width: auto;
  }
  .brand__logo {
    height: 2.5rem;
    max-height: 40px;
  }
  .site-header__actions {
    flex: 0 0 auto;
    width: auto;
  }

  body:not(.page-index) #main {
    padding-top: 4.5rem;
  }

  .site-nav {
    display: none;
  }

  /* The bar is the navigation on a phone; above this breakpoint the header
     shows the full nav instead and the bar is not drawn. Styling lives with
     the component in main.css — this only decides whether it is on screen. */
  .bottom-nav {
    display: block;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(44, 95, 56, 0.22);
    box-shadow:
      0 4px 14px rgba(44, 95, 56, 0.10),
      0 14px 34px -10px rgba(26, 35, 27, 0.22);
  }
  /* WhatsApp is the last item in the bar down here, so the floating button
     would be the same action twice. */
  .wa-fab {
    display: none;
  }

  /* Nothing should end underneath the bar. The clearance goes on the footer
     rather than on <body>: padding on the body reserves the space but paints
     it in the body's white, which left a bright strip under the dark footer
     with the bar sitting on it. Padding the footer extends its own dark
     background behind the bar instead. */
  .site-footer {
    padding-bottom: calc(var(--space-8) + var(--bottom-nav-h));
  }


  /* The menu is a drawer now, styled in main.css. It sits outside <header>,
     so the .site-header--overlay .mobile-nav rules that used to dress the
     dropdown had nothing left to match and are gone. */

  /* Hero scroll section */
  .hero-scroll {
    height: 220vh;
  }
  .hero-scroll__pin {
    height: 100vh;
    height: 100dvh; /* Dynamic viewport height prevents address bar jump */
  }
  .hero-scroll__wrap {
    padding-top: clamp(4.25rem, 9vh, 5.25rem);
    padding-bottom: 1rem;
    padding-inline: 1rem;
    display: flex;
    justify-content: center;
  }

  /* --- Hero, on a phone ---------------------------------------------------
     The panel is gone here, on purpose.

     On a wide screen the frosted card is a column beside the orchard: you see
     the photograph, the falling leaves and the card at once. On a phone there
     is no beside — a panel wide enough to hold the type covers the frame, and
     the scroll animation, which is the whole point of the section, reads as a
     blur behind glass.

     So on mobile the card stops being an object. The type sits directly on
     the photograph, contrast comes from a scrim weighted to the bottom of the
     frame rather than from a fill behind the words, and the copy is set in
     white with lime for the accent instead of forest green on white. The
     animation is then unobstructed for the top half of the screen.
     ------------------------------------------------------------------------ */

  /* Bottom-weighted scrim, replacing the daylight one. Dark enough under the
     copy for white type to clear AA, and clear of the top of the frame so the
     canopy and the leaves come through. */
  .hero-scroll__scrim {
    background:
      linear-gradient(180deg, rgba(10, 26, 14, 0.34) 0%, rgba(10, 26, 14, 0) 24%),
      linear-gradient(180deg, rgba(10, 26, 14, 0) 26%, rgba(10, 26, 14, 0.46) 50%, rgba(10, 26, 14, 0.74) 66%, rgba(10, 26, 14, 0.9) 100%);
  }

  /* Copy sits on the floor of the frame; the animation gets everything above
     it rather than a band top and bottom. */
  .hero-scroll__pin {
    align-items: flex-end;
  }
  .hero-scroll__wrap {
    padding-top: 0;
    /* Clears the bottom bar. The hero pins to the viewport, so its copy would
       otherwise finish underneath the bar rather than above it. */
    padding-bottom: calc(var(--bottom-nav-h) + 0.35rem);
    padding-inline: 1.25rem;
    display: block;
  }

  .hero-scroll__card {
    max-width: 100%;
    width: 100%;
    padding: 0;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  /* Phase 1 shows the wordmark on a phone too, at the client's direction —
     and at their later direction, with no plate behind it: the logo sits
     straight on the photograph, background-free.

     That is harder than it sounds, because the artwork is not one colour.
     "Jobson" is near-black and "Garden" is forest green, and the logo is used
     as-is and never recoloured — a confirmed brand rule — so neither can be
     lightened to survive a dark frame. Without a plate, a light background
     photo swallows the black half and a dark orchard frame swallows the green
     half.

     The fix is the same one the set-type version of this phase already uses:
     a light halo, built from stacked drop-shadows rather than a filled
     background, so there is no panel but the artwork still has something to
     stand on. drop-shadow (not box-shadow) is what lets the glow follow the
     letterforms and the tree silhouette instead of drawing a rectangle. */
  .hero-scroll__title-logo {
    display: block;
    height: clamp(4.35rem, 18.5vw, 6.0rem);
    width: auto;
    max-width: 100%;
    object-fit: contain;
    object-position: left center;
    filter: drop-shadow(0 4px 18px rgba(6, 18, 9, 0.65));
  }

  /* Type in light. The shadows are soft and wide rather than hard: they lift
     the letterforms off the moving frames without reading as an outline. */
  .hero-scroll__eyebrow {
    color: var(--accent);
    text-shadow: 0 1px 10px rgba(6, 18, 9, 0.55);
  }
  .hero-scroll__title {
    text-shadow: 0 2px 18px rgba(6, 18, 9, 0.5);
  }
  .hero-scroll__title-primary {
    color: #ffffff;
  }
  .hero-scroll__title-leaf {
    color: var(--accent);
  }
  .hero-scroll__lede {
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 1px 12px rgba(6, 18, 9, 0.6);
  }

  /* The ghost button was restated in ink for the light card. Back to white. */
  .hero-scroll__card .btn--ghost {
    color: #ffffff;
    border: 1.5px solid rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  .hero-scroll__card .btn--ghost:hover,
  .hero-scroll__card .btn--ghost:focus-visible {
    background: rgba(255, 255, 255, 0.26);
    border-color: #ffffff;
    color: #ffffff;
  }

  .hero-scroll__footer {
    border-top-color: rgba(255, 255, 255, 0.3);
    /* The floating WhatsApp button that this used to dodge is not drawn on a
       phone any more — the bottom bar carries it, and the hero wrap clears
       the bar as a whole. So the hint gets the full width back. */
  }
  .hero-scroll__progress-track {
    background: rgba(255, 255, 255, 0.28);
  }
  .hero-scroll__indicator {
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 1px 8px rgba(6, 18, 9, 0.6);
  }
  .hero-scroll__mouse {
    border-color: rgba(255, 255, 255, 0.85);
  }
  .hero-scroll__mouse::before {
    background: #ffffff;
  }

  /* Smaller leaves on a phone — at desktop size they read as debris. */
  .hero-scroll__leaf {
    width: 44px;
    height: 44px;
  }

  /* Phase content heights and typography */
  .hero-scroll__phases {
    min-height: 18.5rem;
  }
  .hero-scroll__eyebrow {
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    margin-bottom: 0.5rem;
  }
  .hero-scroll__title {
    font-size: clamp(2rem, 6.8vw, 2.75rem);
    line-height: 0.96;
    margin-bottom: 0.75rem;
  }
  .hero-scroll__lede {
    font-size: 0.92rem;
    line-height: 1.55;
    margin-bottom: 1.25rem;
  }

  /* Full-width touch-friendly actions on phones */
  .hero-scroll__actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.65rem;
    margin-bottom: 1rem;
  }
  .hero-scroll__actions .btn {
    width: 100%;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.7rem 1.25rem;
    font-size: 0.88rem;
  }

  .hero-scroll__footer {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
  }
  .hero-scroll__indicator {
    font-size: 0.72rem;
  }

  /* Trust strip on mobile */
  .trust {
    margin-top: -1.75rem;
    padding-bottom: var(--space-10);
  }
  .trust__grid {
    /* Back to row flow — main.css uses grid-auto-flow: column for the
       one-row desktop strip, and that would ignore this column count. */
    grid-auto-flow: row;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6) var(--space-3);
    padding: 1.25rem 1rem;
    border-radius: 1rem;
  }
  /* An odd number of stats leaves the last one orphaned in the left column.
     Span it across both so the block stays balanced. Scoped to :last-child
     + :nth-child(odd) so it only applies when there IS an orphan. */
  .trust__item:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
  .trust__value {
    font-size: clamp(1.5rem, 5vw, 2.25rem);
  }
  .trust__label {
    font-size: 0.78rem;
    line-height: 1.35;
  }

  /* Section layouts */
  .duo, .feature, .reasons, .contact__details {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .duo__card {
    padding: 1.25rem;
    border-radius: 1rem;
  }
  .duo__media img {
    aspect-ratio: 16 / 10;
  }
  .feature__media {
    position: static;
  }
  .feature__media img {
    aspect-ratio: 4 / 3;
  }
  .site-footer__inner {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
  .site-footer__legal {
    flex-direction: column;
    gap: var(--space-3);
    text-align: center;
  }

  /* --- Cards on a phone ---------------------------------------------------- */

  /* A fixed height clips the text if a title ever wraps to three lines or the
     browser's minimum font size is larger than ours. Same look, no clipping. */
  .mission-card {
    height: auto;
    min-height: 20rem;
  }

  /* --- Touch targets ------------------------------------------------------- */

  /* These read as links rather than buttons, so they were sized as text: the
     arrow links came out 19-25px tall and the footer links 20px, against a
     44px minimum. Padding rather than font-size, so nothing is redrawn — the
     hit area grows, the type does not. */
  .link-arrow,
  .plant__action {
    min-height: 44px;
    padding-block: 0.55rem;
  }
  .site-footer__links li {
    margin-bottom: 0;
  }
  .site-footer__links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .site-footer__wa-badge {
    min-height: 44px;
  }
  .site-footer__logo-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* --- Extra-Small Phones (max-width: 380px) --------------------------------- */

@media (max-width: 380px) {
  /* No card padding to shrink any more — the wrap carries the gutter. */
  .hero-scroll__wrap {
    padding-inline: 1rem;
  }
  .hero-scroll__title {
    font-size: 1.85rem;
  }
  .hero-scroll__phases {
    min-height: 17rem;
  }
  .hero-scroll__lede {
    font-size: 0.85rem;
  }
  .trust__grid {
    padding: 1rem 0.75rem;
    gap: var(--space-4) var(--space-2);
  }
}

/* --- Small Screen Tables (max-width: 640px) ------------------------------- */

@media (max-width: 640px) {
  .steps {
    grid-template-columns: 1fr;
  }
  .plants {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .plant {
    border-radius: 0.75rem;
  }
  .plant__body {
    padding: 0.65rem 0.55rem;
    gap: 2px;
  }
  .plant__tag {
    font-size: 9.5px;
    padding: 2px 5px;
    margin-bottom: 2px;
  }
  .plant__name {
    font-size: 13px;
    line-height: 1.2;
  }
  .plant__malayalam {
    font-size: 11px;
  }
  .plant__note {
    font-size: 11px;
    line-height: 1.35;
    margin-top: 2px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .plant__action {
    font-size: 10px;
    padding-top: 6px;
    gap: 3px;
  }
  .plant__action svg {
    width: 12px;
    height: 12px;
  }

  .compare-scroll {
    margin-inline: calc(var(--space-2) * -1);
    border-radius: 6px;
  }
  .compare {
    min-width: 440px;
    font-size: 12.5px;
  }
  .compare thead th {
    padding: 10px 10px;
    font-size: 12px;
  }
  .compare tbody th {
    padding: 10px 10px;
    font-size: 12px;
  }
  .compare tbody td {
    padding: 10px 10px;
    font-size: 12px;
  }
  .compare__note {
    font-size: 12px;
    line-height: 1.4;
  }
  .plantation-cta {
    margin-top: var(--space-6);
    padding-top: var(--space-4);
    width: 100%;
  }
  .plantation-cta .btn {
    width: 100%;
    text-align: center;
    justify-content: center;
    padding-block: 14px;
  }
}

/* --- Landscape Phones (max-height: 540px and orientation: landscape) ------ */

@media (max-height: 540px) and (orientation: landscape) {
  .site-header {
    top: 0.5rem;
  }
  .site-header__inner {
    padding-block: 4px;
  }
  .brand__logo {
    height: 2.15rem;
  }

  .hero-scroll__wrap {
    padding-top: 3.5rem;
  }
  .hero-scroll__card {
    max-width: 32rem;
    padding: 0.85rem 1.25rem;
    border-radius: 1rem;
  }
  /* No vertical room to fall in landscape — the leaves would just streak. */
  .hero-scroll__leaves {
    display: none;
  }
  .hero-scroll__phases {
    min-height: 11rem;
  }
  .hero-scroll__eyebrow {
    font-size: 0.68rem;
    margin-bottom: 0.25rem;
  }
  .hero-scroll__title {
    font-size: 1.6rem;
    margin-bottom: 0.35rem;
  }
  .hero-scroll__lede {
    font-size: 0.8rem;
    line-height: 1.35;
    margin-bottom: 0.65rem;
  }
  .hero-scroll__actions {
    flex-direction: row;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
  }
  .hero-scroll__actions .btn {
    min-height: 36px;
    padding: 0.35rem 0.85rem;
    font-size: 0.78rem;
    width: auto;
  }
  .hero-scroll__footer {
    display: none; /* Save vertical space for video view */
  }
}
/* --- No-backdrop-filter fallback ------------------------------------------
   responsive.css loads after main.css, so main.css's @supports guard cannot
   beat the mobile card rule above. Re-assert the opaque fill here, last.
   Without blur there is nothing to soften the photo behind the text, so the
   card has to carry the contrast on its own.
   -------------------------------------------------------------------------- */

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  /* Wide screens only. The phone layout has no glass to fall back FROM — it
     carries its contrast in the scrim and the text shadows, both of which
     work without backdrop-filter. Dropping an opaque white plate on top of
     it here would undo the whole mobile treatment. */
  @media (min-width: 769px) {
    .hero-scroll__card { background: rgba(255, 255, 255, 0.94); }
    .hero-scroll__card .btn--ghost { background: rgba(255, 255, 255, 0.9); }
  }
}

/* --- Page Cover (Banner) Mobile Fix --------------------------------------- */
@media (max-width: 768px) {
  .page-cover {
    height: auto !important;
    min-height: clamp(23rem, 65vh, 30rem);
    overflow: visible;
  }
  .page-cover__media {
    min-height: inherit;
    position: relative;
    /* The cover photo zooms in slightly as it appears. Clip it here, since
       .page-cover itself stays visible: an unclipped photo made the page
       wider than the phone, which zoomed the page out and pushed the top
       and bottom bars off position. */
    overflow: hidden;
  }
  .page-cover__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .page-cover__content {
    position: relative !important;
    min-height: inherit;
    padding-top: calc(var(--space-16) + 1.25rem);
    padding-bottom: var(--space-8);
    justify-content: center;
    padding-inline: var(--gutter);
  }
  .page-cover__eyebrow {
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    margin-bottom: 0.35rem;
  }
  .page-cover__title-top {
    font-size: 0.95rem;
    letter-spacing: 0.04em;
    margin-bottom: 0.2rem;
  }
  .page-cover__title-main {
    font-size: clamp(1.85rem, 6.5vw, 2.5rem);
    line-height: 1.15;
  }
  .page-cover__lede {
    font-size: 0.875rem;
    line-height: 1.5;
    max-width: 28rem;
    margin: 0.75rem auto 0;
    color: rgba(255, 255, 255, 0.95);
    text-align: center;
  }
}

/* --- Plantation Layout: 1 (Heading & text) on top, 2 comparison cards side-by-side below --- */
@media (max-width: 900px) {
  .plantation-grid-3 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    width: 100% !important;
  }
  .plantation-col-intro {
    grid-column: 1 / -1 !important;
    margin-bottom: var(--space-4) !important;
    width: 100% !important;
  }
  .plantation-col-intro .section__title {
    font-size: clamp(1.6rem, 5vw, 2.2rem);
  }
  .plantation-intro p {
    text-align: justify;
    text-justify: inter-word;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: var(--space-3);
  }
  .plantation-suits ul.ticks {
    margin-bottom: var(--space-2);
  }
  .plantation-suits ul.ticks li {
    text-align: justify;
    text-justify: inter-word;
    font-size: 13px;
  }

  /* Two comparison cards side by side on mobile bottom */
  .plantation-grid-3 > .plan-card {
    padding: 10px 8px;
    border-radius: 10px;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
  }
  .plan-card__head {
    padding-bottom: 5px;
  }
  .plan-card__title {
    font-size: 12px;
    line-height: 1.2;
    margin: 0 0 2px;
  }
  .plan-card__desc {
    font-size: 9.5px;
    line-height: 1.2;
    margin-bottom: 4px;
    min-height: auto;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .plan-card__price-box {
    padding: 3px 5px;
    gap: 2px;
    border-radius: 5px;
  }
  .plan-card__currency {
    font-size: 10px;
  }
  .plan-card__amount {
    font-size: 14px;
    line-height: 1;
  }
  .plan-card__amount--text {
    font-size: 11px;
    line-height: 1;
  }
  .plan-card__term {
    font-size: 8px;
    margin-left: 2px;
  }
  .plan-card__features {
    margin: 4px 0 0;
  }
  .plan-card__feature {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    padding-block: 4px;
    font-size: 10.5px;
  }
  .plan-icon {
    width: 13px;
    height: 13px;
    min-width: 13px;
    margin-top: 1px;
  }
  .plan-icon svg {
    width: 8px;
    height: 8px;
  }
  .plan-feature-text {
    line-height: 1.2;
    gap: 0;
  }
  .feature-label {
    font-size: 9px;
    line-height: 1.15;
  }
  .feature-value {
    font-size: 10px;
    line-height: 1.2;
  }

  .plantation-common-footer {
    margin-top: var(--space-6);
    padding-top: var(--space-4);
    width: 100%;
  }
  .plantation-common-cta {
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .btn--compact {
    padding: 8px 20px !important;
    font-size: 12.5px !important;
    width: auto !important;
    max-width: 280px;
    margin-inline: auto;
  }
  .plantation-common-footer .compare__note {
    text-align: justify;
    text-justify: inter-word;
    font-size: 12px;
    line-height: 1.55;
  }
}