/* =========================================================================
   Team Raju - responsive layer
   Author: Charlotte (AIOS). Remapped to the lifted class names.

   Mobile-additive. layout.css holds the desktop comp verbatim and is the
   source of truth; every rule here lives inside a max-width query, so at
   1180px and above this file contributes nothing and the design renders
   exactly as it was drawn. Breakpoints: 1180 / 900 / 600 / 380.
   ========================================================================= */

/* ---- 0. Global lever + page guards ------------------------------------ */
:root{
  --gutter: 36px;          /* the side padding of the comp; one lever */
}

html{
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
html, body{
  max-width: 100%;
  overflow-x: hidden;
}
img, video{ max-width: 100%; }

/* Off-canvas scaffolding. New elements, inert on desktop. */
.tr-nav-toggle{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.tr-burger{ display:none; }
.tr-nav-scrim{ display:none; }
.tr-header__drawer{ display: contents; }   /* desktop: nav + CTA stay direct
                                              flex children of the header,
                                              so the bar is untouched */

/* =========================================================================
   0b. TRUST STRIP OVERHANG  -  max-width 1400px
   custom.css anchors the language group's left edge to the Call Raju button by
   giving it the button's width and letting its content overhang into the right
   gutter. The room left over is (100% - 1180)/2 - 65, so:

       1310px   0px  — "Hindi" reaches the window edge
       1400px  45px
       1440px  65px
       1920px 305px

   1310 is where it stops being clipped, but a word 9px from the edge of the
   window looks like a fault even though it is whole. The cut-off is 1400, the
   first width where the overhang keeps a margin comparable to the gutter every
   other section respects. Below it the group sizes itself and sits flush right,
   as it always did.
   ========================================================================= */
@media (max-width: 1400px){
  .tr-utilitybar .tr-trust--contact{
    flex: 0 1 auto;
    width: auto;
    flex-wrap: wrap;
  }
}

/* =========================================================================
   1. LAPTOP / LARGE TABLET  -  max-width 1180px
   The wrapper is already max-width:1180px;margin:0 auto, so it goes fluid on
   its own. Only the hardcoded boxes need releasing here.
   ========================================================================= */
@media (max-width: 1180px){
  .tr-header__logo{ width: min(150px, 34vw); }
  .tr-footer__logo{ width: min(200px, 70vw); }

  /* --- Header: hide the desktop nav, show the drawer -------------------
     This used to happen at 900px. It happens here instead because the header
     bar runs out of room first: the content column shrinks with the viewport
     while the logo (210px) and the phone button do not, so the seven links get
     squeezed and their labels wrap to two lines each — "Land & investment"
     over two lines, and so on. That was marginally true at the comp's own 14px
     and is plainly true at 18px.

     Above 1180px the desktop bar is untouched and fits with room to spare.
     Below it, the drawer — which was already built and tested for phones —
     takes over 280px earlier than before. Nothing else moved: the tablet
     block below still starts at 900px.                                  */
  /* --- Header: hide the desktop nav, show the drawer ------------------- */
  .tr-header__drawer{
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: fixed; top: 0; right: 0;
    height: 100dvh;
    width: min(84vw, 320px);
    background: var(--tr-black);
    border-left: 3px solid var(--tr-red);
    transform: translateX(100%);
    transition: transform .28s ease;
    z-index: 50;
    padding: calc(20px + env(safe-area-inset-top)) 24px
             calc(24px + env(safe-area-inset-bottom));
    overflow-y: auto;
  }
  .tr-header__nav{
    flex-direction: column;
    gap: 0;
    color: var(--tr-white);
  }
  .tr-header__nav > *{
    display: flex; align-items: center;
    min-height: 44px;
    border-bottom: 1px solid rgba(232,228,221,.12);
  }
  /* base.css paints every <a> brand red, which is unreadable on the dark
     panel. Inside the drawer only, links take the light text colour. */
  .tr-header__drawer .tr-header__nav a{ color: var(--tr-white); }
  .tr-header__drawer .tr-header__nav a:hover,
  .tr-header__drawer .tr-header__nav a:focus-visible{ color: var(--tr-gold); }
  .tr-header__actions{
    flex-direction: column;
    margin-top: 16px;
  }
  .tr-header__actions > a{
    display: flex; align-items: center; justify-content: center;
    min-height: 44px;
  }

  .tr-burger{
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px; height: 44px;
    padding: 11px 10px;
    background: transparent;
    border: 0;
    cursor: pointer;
    z-index: 60;
  }
  .tr-burger span{
    display:block; height:2px; width:100%;
    background:var(--tr-black); border-radius:2px;
  }

  .tr-nav-scrim{
    display: block;
    position: fixed; inset: 0;
    background: rgba(var(--tr-black-rgb), .55);
    opacity: 0; visibility: hidden;
    transition: opacity .28s ease, visibility .28s ease;
    z-index: 40;
  }

  .tr-nav-toggle:checked ~ .tr-header__drawer{ transform: translateX(0); }
  .tr-nav-toggle:checked ~ .tr-nav-scrim{ opacity: 1; visibility: visible; }
  .tr-nav-open, .tr-nav-open body{ overflow: hidden; }
}

/* =========================================================================
   2. TABLET  -  max-width 900px
   Multi-column blocks halve, the hero leaves absolute positioning, and the
   hamburger takes over from the desktop nav.
   ========================================================================= */
@media (max-width: 900px){
  :root{ --gutter: 24px; }

  /* --- Hero: absolute overlay -> normal flow so it can grow with content - */
  .tr-hero{ height: auto; min-height: 560px; }
  .tr-hero__content{
    position: relative;                 /* positioned, but in flow, so it
                                           still paints over the video */
    inset: auto;
    z-index: 2;
    padding: 104px var(--gutter) 56px;
  }
  .tr-hero__title{ max-width: 100%; }
  .tr-hero__lede{ max-width: 100%; }

  /* The header's drawer, burger and scrim moved up to the 1180 block —
     see the note there. */


  /* --- Stats bar: 4-up -> 2-up ----------------------------------------- */
  /* Dividers are the inset pseudo-element rules set up in custom.css. Two
     columns means a vertical rule after the left cell of each row and a
     horizontal one under the top row. Every selector here carries a
     :nth-child()-class of its own so it matches the specificity of the rules
     in custom.css and wins on source order, rather than losing to them. */
  .tr-stats{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .tr-stats__cell:nth-child(n)::after{ display: none; }
  .tr-stats__cell:not(:nth-child(2n))::after{ display: block; }
  /* four cells in two rows: only the top row carries a rule underneath */
  .tr-stats__cell:nth-last-child(n+3)::before{ display: block; }
  .tr-stats__cell:nth-last-child(-n+2)::before{ display: none; }

  /* --- Intro split -> stacked, portrait first -------------------------- */
  .tr-intro{ grid-template-columns: 1fr; gap: 32px; }
  /* 22px, not the gutter: the chip aligns to the left edge of the photograph,
     which is inset 22px inside its wrapper at every width. */
  .tr-intro__chip{ left: 22px; bottom: 16px; max-width: min(84%, 240px); }

  /* --- Pillars: 3-up -> 1-up ------------------------------------------- */
  .tr-pillars{ grid-template-columns: 1fr; }
  /* 300px was drawn around a photograph; the copy needs 186px of it once the
     picture and the 01/02/03 kickers are gone. */
  .tr-pillars__tile{ height: 210px; }

  /* --- Detailed search: 4-up fields -> 2-up ---------------------------- */
  .tr-search__grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }

  /* --- Contact band: split -> stacked ---------------------------------- */
  .tr-cta{ grid-template-columns: 1fr; }
  .tr-cta__media{ min-height: 260px; }

  /* --- Footer: 1.4fr + 3 -> 2-up --------------------------------------- */
  .tr-footer__grid{ grid-template-columns: repeat(2, minmax(0,1fr)); gap: 36px; }
  .tr-footer__brand{ grid-column: 1 / -1; }
}

/* =========================================================================
   3. PHONE  -  max-width 600px
   Single column throughout, tighter gutter, touch + iOS fixes.
   ========================================================================= */
@media (max-width: 600px){
  :root{ --gutter: 20px; }

  /* the trust strip is two groups in a space-between row; at 18px they no
     longer sit side by side on a phone, so the bar wraps and the groups stack
     left-aligned instead of being pushed to opposite edges. */
  .tr-utilitybar{ flex-wrap: wrap; justify-content: flex-start; gap: 6px 0; }
  .tr-trust{ row-gap: 6px; }

  .tr-hero{ min-height: 500px; }
  .tr-hero__content{ padding: 96px var(--gutter) 44px; }

  /* hero search: field | field | button -> stacked */
  .tr-herosearch{ grid-template-columns: 1fr; }

  /* stats 2-up -> 1-up: one column, so no vertical rules at all and a
     horizontal one under every cell but the last */
  .tr-stats{ grid-template-columns: 1fr; }
  .tr-stats__cell:nth-child(n)::after{ display: none; }
  .tr-stats__cell:not(:last-child)::before{ display: block; }

  /* listings + reviews share the same 2-up card grid -> 1-up */
  .tr-cardgrid{ grid-template-columns: 1fr; }

  /* the section head is a nowrap flex row: heading left, CTA right. At 18px the
     CTA no longer fits beside the heading on a phone and was being clipped by
     the page's overflow-x guard, so it wraps under instead. */
  .tr-sectionhead{ flex-wrap: wrap; gap: 16px; }

  /* detailed search 2-up -> 1-up, and the keyword row unstacks its button */
  .tr-search__grid{ grid-template-columns: 1fr; }
  .tr-search__row{ grid-template-columns: 1fr; }
  .tr-search__submit{ padding: 16px 34px; }

  /* contact form field grid -> 1-up; the 1/-1 spanners already fill */
  .tr-cta__fields{ grid-template-columns: 1fr; }
  .tr-cta__span{ grid-column: 1 / -1; }

  /* intro chip: out of the overlay, into the flow under the portrait */
  .tr-intro__chip{
    position: static;
    inset: auto;
    width: auto;
    height: auto;
    max-width: 100%;
    margin-top: 16px;
  }

  /* sold rail: card 1 aligns to the gutter, card 2 peeks */
  .tr-sold__head{ flex-wrap: wrap; }
  .tr-sold__viewport{ padding: 6px var(--gutter) 14px; }
  .tr-sold__track{ gap: 14px; }
  .tr-sold__card{ flex: 0 0 82%; }

  /* footer 2-up -> 1-up */
  .tr-footer__grid{ grid-template-columns: 1fr; }
  .tr-footer__brand{ grid-column: auto; }

  /* touch targets */
  .tr-header__actions > a,
  .tr-herosearch button,
  .tr-search__submit,
  .tr-field,
  .tr-sold__nav button{ min-height: 44px; }

  /* iOS zooms any focused control under 16px; bump the controls only */
  input, select, textarea{ font-size: 16px; }
}

/* =========================================================================
   4. TIGHTEST GUTTER  -  max-width 380px
   ========================================================================= */
@media (max-width: 380px){
  :root{ --gutter: 16px; }
  .tr-sold__card{ flex: 0 0 88%; }
}

/* =========================================================================
   5. Sub-footer safe area (notched phones)
   ========================================================================= */
@media (max-width: 900px){
  .tr-subfooter{
    padding-left: max(var(--gutter), env(safe-area-inset-left));
    padding-right: max(var(--gutter), env(safe-area-inset-right));
  }
  /* the credit is now the last thing on the page, so it carries the
     bottom safe-area inset instead of the legal row above it */
  .tr-credit{
    padding-left: max(var(--gutter), env(safe-area-inset-left));
    padding-right: max(var(--gutter), env(safe-area-inset-right));
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
  }
}

/* =========================================================================
   6. Reduced motion
   ========================================================================= */
@media (prefers-reduced-motion: reduce){
  .tr-header__drawer, .tr-nav-scrim{ transition: none; }
}

/* =========================================================================
   Inner pages (About, Contact, Reviews)
   ========================================================================= */
@media (max-width: 1180px){
  .tr-principles__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px){
  .tr-contact{ grid-template-columns: 1fr; }
  .tr-contact__form,
  .tr-contact__info{ padding: 44px var(--gutter); }
  .tr-cta__body{ padding: 44px var(--gutter); }
  .tr-pagehero__content{ padding-top: 44px; padding-bottom: 40px; }
  .tr-steps__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px){
  /* The two buttons beside each other (About story, closing band) stay side by
     side on a phone: equal widths, smaller type, text may wrap inside a button. */
  .tr-story__actions,
  .tr-cta__actions{ flex-wrap: nowrap; gap: 8px; }
  .tr-story__actions > a,
  .tr-cta__actions > a{
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    padding: 12px 8px;
    font-size: 13px;
    letter-spacing: .06em;
    text-align: center;
  }
  .tr-principles__grid,
  .tr-steps__grid,
  .tr-contactform{ grid-template-columns: 1fr; }
  .tr-story,
  .tr-principles,
  .tr-steps{ padding-top: 48px; padding-bottom: 48px; }
  .tr-ratingbadge{ width: 100%; box-sizing: border-box; }
}