/* ============================================================
   YourTechBuddy — Responsive Layouts
   Real responsive breakpoints (not just a shrunk desktop).
   ============================================================ */

/* Large desktop tweak */
@media (min-width:1400px){
  :root{--maxw:1240px;}
}

/* Laptop / small desktop */
@media (max-width:1100px){
  .footer-grid{grid-template-columns:1.6fr 1fr 1fr;row-gap:30px;}
  .footer-grid .f-contact{grid-column:1/2;}
  .footer-grid .f-news{grid-column:2/4;}
}

/* Tablet landscape */
@media (max-width:992px){
  :root{--header-h:66px;}
  .main-nav{display:none;}
  .menu-toggle{display:flex;}
  .header-actions .btn{display:none;}

  .hero-grid{grid-template-columns:1fr;gap:30px;padding:48px 0 60px;text-align:left;min-height:0;}
  .hero-copy{min-width:0;}
  .hero-media img{object-position:center;}
  .hero-slideshow .hero-slide.is-active{opacity:.30;}
  .hero::before{background:linear-gradient(180deg,rgba(7,24,41,.74) 0%,rgba(7,24,41,.84) 55%,var(--navy) 100%);}
  .page-hero-grid{grid-template-columns:1fr;gap:26px;padding:44px 0;min-height:0;}
  .page-hero-media img{object-position:center;opacity:.28;}
  .page-hero::after{background:linear-gradient(180deg,rgba(7,24,41,.72) 0%,rgba(7,24,41,.84) 55%,var(--navy) 100%);}

  .g-4{grid-template-columns:repeat(2,1fr);}
  .g-3{grid-template-columns:repeat(2,1fr);}
  .support-cards{grid-template-columns:1fr;margin-top:-40px;}
  .steps{grid-template-columns:repeat(2,1fr);gap:30px;}
  .steps::before{display:none;}
  .step .num{transform:translateX(20px);}
  .testi{flex-basis:calc((100% - 24px)/2);}
  .values-grid{grid-template-columns:repeat(2,1fr);}
  .stat-band{grid-template-columns:repeat(2,1fr);row-gap:30px;}

  .sd-overview{grid-template-columns:1fr;gap:26px;}
  .pd-grid{grid-template-columns:1fr;gap:30px;}
  .cart-layout{grid-template-columns:1fr;}
  .summary{position:static;}
  .featured-article{grid-template-columns:1fr;}
  .featured-article .fa-img{min-height:220px;}
  .cta-band .cta-inner{flex-direction:column;align-items:flex-start;}
  .booking-layout{grid-template-columns:1fr;gap:28px;}
  .contact-grid{grid-template-columns:1fr;gap:28px;}
  .cat-chip-row{grid-template-columns:repeat(3,1fr);}
  .newsletter-band{flex-direction:column;align-items:flex-start;}
  .newsletter-band .newsletter-form{min-width:0;width:100%;}
}

/* Tablet portrait / large phone */
@media (max-width:768px){
  .section{padding:52px 0;}
  .trust-badges{flex-wrap:wrap;}
  .trust-badge{font-size:.8rem;padding:8px 12px;}
  .testi{flex-basis:100%;}
  .rev-arrow{display:none;}
  .section-head{margin-bottom:32px;}
  .cta-band{padding:32px 26px;}
  .cta-left{flex-direction:row;}
  .promo .promo-inner{padding:28px 26px;}
  .summary-box .sb-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .footer-grid .f-brand{grid-column:1/-1;}
  .footer-grid .f-news{grid-column:1/-1;}
}

/* Phones */
@media (max-width:560px){
  .container{padding:0 18px;}
  h1{font-size:1.9rem;}
  .trust-badges{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
  .trust-badge{font-size:.74rem;padding:8px 10px;white-space:normal;line-height:1.25;min-width:0;}
  .g-2,.g-3,.g-4{grid-template-columns:1fr;}
  .values-grid{grid-template-columns:1fr 1fr;}
  .steps{grid-template-columns:1fr;}
  .form-grid{grid-template-columns:1fr;}
  .hero-cta{flex-direction:column;}
  .hero-cta .btn{width:100%;}
  .cta-band .cta-actions{width:100%;flex-direction:column;}
  .cta-band .cta-actions .btn{width:100%;}
  .cart-item{grid-template-columns:64px 1fr;grid-template-areas:"img info" "img price";row-gap:8px;}
  .cart-item .ci-img{width:64px;height:64px;grid-area:img;}
  .cart-item .ci-body{grid-area:info;}
  .ci-price{grid-area:price;text-align:left;}
  .pd-info h1{font-size:1.5rem;}
  .faq-cats{gap:8px;}
  .faq-cat{padding:8px 14px;font-size:.82rem;}
  .stat-band{grid-template-columns:1fr 1fr;}
  .testi blockquote{font-size:.92rem;}
  .product-card .pactions{flex-direction:column;}
  .cat-chip-row{grid-template-columns:repeat(2,1fr);}
  .qty-row{flex-direction:column;align-items:stretch;}
  .qty-row .btn{width:100%;justify-content:center;}
  .qty{align-self:flex-start;}
  .newsletter-band{padding:30px 24px;}
}

/* Small phones */
@media (max-width:380px){
  .values-grid{grid-template-columns:1fr;}
  .stat-band{grid-template-columns:1fr;}
  .logo img{height:30px;}
}

/* ============================================================
   Requested mobile layout refinements
   (1) gap below hero trust badges  (2) support cards one row
   (3) Tech Essentials 3-up  (4) fixes slider widths
   (5) Products page 3-up
   ============================================================ */

/* (4) Recent Tech Fixes slider — items per view match the carousel JS
   breakpoints (3 desktop / 2 tablet / 1 phone) */
@media (max-width:992px){
  .carousel-track .fix-card{flex:0 0 calc((100% - 24px)/2);}
}
@media (max-width:768px){
  .carousel-track .fix-card{flex:0 0 100%;}
}

/* (2) Keep the three support cards in ONE ROW on tablet & phone (scaled down) */
@media (max-width:992px){
  .support-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;}
  .support-card{padding:18px;}
}

/* Phones */
@media (max-width:560px){
  /* (1) small clean gap between hero trust badges and the white cards section */
  .hero-grid{padding-bottom:30px;}
  .support-cards{margin-top:18px;gap:8px;}

  /* (2) three compact support cards in one row */
  .support-card{padding:13px 9px;border-radius:13px;}
  .support-card .ic-round{width:40px;height:40px;border-radius:11px;margin-bottom:10px;}
  .support-card .ic-round img{width:24px;height:24px;}
  .support-card h3{font-size:.8rem;line-height:1.2;margin-bottom:6px;}
  .support-card p{font-size:.72rem;margin-bottom:12px;}
  .support-card .btn{padding:9px 6px;font-size:.7rem;border-radius:9px;white-space:normal;line-height:1.2;min-height:50px;text-align:center;}

  /* (3) Tech Essentials Shop — three compact tiles per row */
  .grid.shop-cats{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}
  .shop-cats .cat-card .cimg{display:block;aspect-ratio:1/1;}
  .shop-cats .cat-card .cbody{padding:10px 8px;}
  .shop-cats .cat-card h3{font-size:.78rem;line-height:1.2;margin-bottom:8px;}
  .shop-cats .cat-card p{display:none;}
  .shop-cats .cat-card .btn{padding:8px 6px;font-size:.68rem;white-space:normal;line-height:1.2;}

  /* (5) Products page — three products per row */
  #product-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}
  #product-grid .pbody{padding:10px 8px;}
  #product-grid .product-card h3{font-size:.78rem;line-height:1.2;}
  #product-grid .product-card h3 a{font-size:inherit;}
  #product-grid .pdesc{display:none;}
  #product-grid .pprice{font-size:.92rem;margin:6px 0;}
  #product-grid .pactions{flex-direction:column;gap:6px;}
  #product-grid .pactions .btn{width:100%;padding:8px 5px;font-size:.66rem;white-space:normal;line-height:1.2;}
  #product-grid .badge{font-size:.6rem;padding:3px 7px;}
}

/* ============================================================
   Home page — additional mobile layout refinements
   (A) Home hero banner image visible on phones
   (B) Popular Services — three compact tiles per row
   (C) How It Works — all four steps in one row
   (D) Why Choose — three tiles per row
   Desktop / laptop layouts are intentionally left unchanged.
   ============================================================ */

/* (A) Make the home hero banner image clearly visible on small screens.
   The photo previously sat at ~30% opacity behind a heavy navy overlay,
   so it read as nearly invisible on phones. Here it shows at full
   strength with a balanced scrim that keeps the white text readable. */
@media (max-width:992px){
  .hero{min-height:430px;}
  .hero-media img{object-position:center;}
  .hero-slideshow .hero-slide.is-active{opacity:1;}
  .hero::before{background:linear-gradient(180deg,
    rgba(7,24,41,.62) 0%,
    rgba(7,24,41,.70) 55%,
    rgba(7,24,41,.86) 100%);}
}
@media (max-width:560px){
  .hero{min-height:400px;}
  /* slightly stronger scrim on the tall stacked phone layout for legibility */
  .hero::before{background:linear-gradient(180deg,
    rgba(7,24,41,.58) 0%,
    rgba(7,24,41,.68) 50%,
    rgba(7,24,41,.88) 100%);}
}

/* (B) + (C) + (D) — three-up / single-row layouts on phones */
@media (max-width:560px){

  /* (B) Popular Services — three compact service tiles per row */
  .grid.pop-services{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}
  .pop-services .service-card{padding:14px 9px;border-radius:13px;}
  .pop-services .service-card .ic{width:42px;height:42px;border-radius:11px;margin-bottom:10px;}
  .pop-services .service-card .ic img{width:25px;height:25px;}
  .pop-services .service-card h3{font-size:.78rem;line-height:1.2;margin-bottom:8px;
    overflow-wrap:break-word;hyphens:auto;}
  .pop-services .service-card p{display:none;}
  .pop-services .service-card .row{flex-direction:column;align-items:stretch;gap:8px;}
  .pop-services .service-card .price-from{font-size:.84rem;}
  .pop-services .service-card .price-from small{font-size:.62rem;}
  .pop-services .service-card .link-more{justify-content:center;width:100%;
    padding:8px 6px;font-size:.66rem;white-space:normal;line-height:1.2;}
  .pop-services .service-card .link-more svg{display:none;}

  /* (C) How It Works — keep all four steps on a single row */
  .steps{grid-template-columns:repeat(4,1fr);gap:8px;}
  .step .ic{width:50px;height:50px;margin-bottom:10px;}
  .step .ic img{width:27px;height:27px;}
  .step .num{width:20px;height:20px;font-size:.66rem;border-width:2px;
    top:-4px;transform:translateX(14px);}
  .step h3{font-size:.72rem;line-height:1.2;margin-bottom:0;}
  .step p{display:none;}

  /* (D) Why Choose YourTechBuddy — three compact tiles per row (6 -> 2 rows) */
  .grid.why-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}
  .why-grid .trust-card{padding:16px 9px;border-radius:13px;}
  .why-grid .trust-card .ic{width:46px;height:46px;margin-bottom:10px;}
  .why-grid .trust-card .ic img{width:26px;height:26px;}
  .why-grid .trust-card h3{font-size:.74rem;line-height:1.2;margin-bottom:0;}
  .why-grid .trust-card p{display:none;}
}

/* Smallest phones — tighten the four-up "How It Works" row a touch more */
@media (max-width:380px){
  .step .ic{width:44px;height:44px;}
  .step .ic img{width:24px;height:24px;}
  .step .num{transform:translateX(11px);}
  .step h3{font-size:.66rem;}
}

/* ============================================================
   Footer refinements
   (1) Elegant white dividers between sections
       - vertical gradient hairlines while columns sit in a row
       - tasteful horizontal separators once columns stack
   (2) Newsletter field no longer clipped in the narrow column
       on wide (5-column) screens — input + button are stacked
   ============================================================ */

/* (1a) Vertical gradient hairlines between side-by-side columns */
@media (min-width:769px){
  .footer-grid > *{position:relative;}
  .footer-grid > * + *::before{
    content:"";position:absolute;top:2px;bottom:2px;left:-17px;width:1px;
    background:linear-gradient(180deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.28) 16%,
      rgba(255,255,255,.28) 84%,
      rgba(255,255,255,0) 100%);
  }
}

/* (1b) 3-column layout — hide the divider that would land at the
   left edge of the second row (Contact Us) so lines stay between
   genuinely adjacent columns only */
@media (min-width:769px) and (max-width:1100px){
  .footer-grid > *:nth-child(4)::before{display:none;}
}

/* (1c) Stacked layout — swap vertical lines for clean horizontal
   separators between each section */
@media (max-width:768px){
  .footer-grid .f-contact{grid-column:1/-1;}
  .footer-grid > * + *::before{display:none;}
  .footer-grid > * + *{
    border-top:1px solid rgba(255,255,255,.12);
    padding-top:26px;
  }
}

/* (2) Wide 5-column footer — stack the newsletter field above a
   full-width button so "Enter your email" is never cut off */
@media (min-width:1101px){
  .f-news .newsletter-form{flex-direction:column;gap:10px;}
  .f-news .newsletter-form input{width:100%;}
  .f-news .newsletter-form .btn{width:100%;}
}

/* Products — single-row scrollable icon chips on phones */
@media (max-width:560px){
  .cat-filter-strip{padding:24px 0 2px;}
  .cat-filter-bar{padding:6px 16px;}
  .cat-filter-track{gap:8px;}
  .cat-filter{padding:5px 14px 5px 5px;font-size:.82rem;gap:8px;}
  .cat-filter .ci{width:30px;height:30px;}
  .cat-filter .ci img{width:19px;height:19px;}
  .cat-filter .ci svg{width:16px;height:16px;}
}

/* About — Who We Help: two-up tiles on phones, tap a title to reveal its description */
@media (max-width:560px){
  .grid.who-grid{grid-template-columns:repeat(2,1fr);gap:12px;align-items:start;}
  .who-card{padding:14px 13px;min-height:62px;cursor:pointer;
    transition:transform .25s var(--ease),box-shadow .25s,border-color .25s;}
  .who-card h3{font-size:.9rem;line-height:1.25;margin-bottom:0;padding-right:20px;}
  .who-toggle{display:flex;align-items:center;justify-content:center;position:absolute;
    top:12px;right:10px;width:20px;height:20px;color:var(--blue);pointer-events:none;
    transition:transform .35s var(--ease);}
  .who-toggle svg{width:18px;height:18px;}
  .who-card .muted{max-height:0;overflow:hidden;opacity:0;margin-top:0;
    font-size:.82rem;line-height:1.45;
    transition:max-height .38s var(--ease),opacity .3s ease,margin-top .38s var(--ease);}
  .who-card.is-open{border-color:var(--blue);box-shadow:0 10px 26px rgba(7,24,41,.08);}
  .who-card.is-open .muted{max-height:260px;opacity:1;margin-top:9px;}
  .who-card.is-open .who-toggle{transform:rotate(180deg);}
}

/* ============================================================
   Service detail pages — compact, organized rows on phones
   Pricing, process/support, and related-service boxes sit in a
   single row (three-up) instead of stacking one per line.
   Scoped to .service-detail so other pages are unaffected.
   ============================================================ */
@media (max-width:560px){

  /* three-up layout for the box sections */
  .service-detail .grid.g-3{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:start;}
  .service-detail .grid.g-4{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;align-items:start;}
  .service-detail .grid.g-2{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start;}

  /* ---- process / support tiles (icon + title) ---- */
  .service-detail .grid.g-3 .card.hoverable{padding:14px 9px;border-radius:13px;}
  .service-detail .grid.g-3 .card.hoverable .ic-round{width:42px!important;height:42px!important;border-radius:11px!important;margin:0 auto 10px!important;}
  .service-detail .grid.g-3 .card.hoverable .ic-round img{width:24px!important;height:24px!important;}
  .service-detail .grid.g-3 .card.hoverable h3{font-size:.76rem;line-height:1.22;margin-bottom:0;}
  .service-detail .grid.g-3 .card.hoverable p{display:none;}

  /* ---- related-service tiles ---- */
  .service-detail .grid.g-3 .service-card{padding:14px 9px;border-radius:13px;}
  .service-detail .grid.g-3 .service-card .ic{width:42px;height:42px;border-radius:11px;margin-bottom:10px;}
  .service-detail .grid.g-3 .service-card .ic img{width:25px;height:25px;}
  .service-detail .grid.g-3 .service-card h3{font-size:.76rem;line-height:1.2;margin-bottom:8px;overflow-wrap:break-word;hyphens:auto;}
  .service-detail .grid.g-3 .service-card p{display:none;}
  .service-detail .grid.g-3 .service-card .row{flex-direction:column;align-items:stretch;gap:8px;}
  .service-detail .grid.g-3 .service-card .price-from{font-size:.84rem;}
  .service-detail .grid.g-3 .service-card .price-from small{font-size:.62rem;}
  .service-detail .grid.g-3 .service-card .link-more{justify-content:center;width:100%;padding:8px 6px;font-size:.66rem;white-space:normal;line-height:1.2;}
  .service-detail .grid.g-3 .service-card .link-more svg{display:none;}

  /* ---- pricing tiles: name + price + button, tap to reveal features ---- */
  .service-detail .grid.g-3 .pricing-card{padding:14px 9px 12px;border-radius:14px;cursor:pointer;}
  .service-detail .grid.g-3 .pricing-card.featured{transform:none;}
  .service-detail .grid.g-3 .pricing-card.featured::before{
    content:"★";top:8px;left:auto;right:8px;transform:none;
    width:20px;height:20px;padding:0;font-size:.7rem;line-height:20px;text-align:center;border-radius:50%;}
  .service-detail .grid.g-3 .pricing-card h3{font-size:.74rem;line-height:1.2;min-height:2.3em;
    display:flex;align-items:center;justify-content:center;}
  .service-detail .grid.g-3 .pricing-card .amount{font-size:1.05rem;margin:6px 0 2px;line-height:1.1;}
  .service-detail .grid.g-3 .pricing-card .amount small{font-size:.6rem;display:block;margin-top:2px;}
  .service-detail .grid.g-3 .pricing-card ul{max-height:0;overflow:hidden;opacity:0;margin:0;
    transition:max-height .4s var(--ease),opacity .3s ease,margin .4s var(--ease);}
  .service-detail .grid.g-3 .pricing-card.is-open ul{max-height:520px;opacity:1;margin:10px 0 8px;}
  .service-detail .grid.g-3 .pricing-card ul li{font-size:.64rem;line-height:1.25;padding:5px 0;gap:5px;}
  .service-detail .grid.g-3 .pricing-card .price-toggle{display:flex;align-items:center;justify-content:center;
    gap:4px;margin:8px auto 0;font-size:.58rem;font-weight:700;letter-spacing:.02em;color:var(--blue);
    text-transform:uppercase;cursor:pointer;}
  .service-detail .grid.g-3 .pricing-card .price-toggle svg{width:13px;height:13px;transition:transform .35s var(--ease);}
  .service-detail .grid.g-3 .pricing-card.is-open .price-toggle svg{transform:rotate(180deg);}
  .service-detail .grid.g-3 .pricing-card .btn{padding:8px 5px;font-size:.66rem;white-space:normal;line-height:1.15;margin-top:8px;}
}

/* ============================================================
   Booking page — feature cards in the sidebar collapse on phones,
   showing the title only; tap a card to reveal its description
   (same friendly pattern as the About page "Who We Help" section).
   The "Prefer to talk?" contact card is left fully visible.
   ============================================================ */
@media (max-width:560px){
  /* three feature cards in a single row; contact card full width below */
  .booking-aside{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:start;}
  .booking-aside .contact-mini{grid-column:1/-1;margin-top:4px;}

  .booking-aside .info-card:not(.contact-mini){display:block;text-align:center;position:relative;
    cursor:pointer;padding:14px 9px;margin:0;border-radius:13px;
    transition:border-color .25s,box-shadow .25s;}
  .booking-aside .info-card:not(.contact-mini) .ic-round{width:42px;height:42px;border-radius:11px;margin:0 auto 9px;}
  .booking-aside .info-card:not(.contact-mini) .ic-round svg{width:23px;height:23px;}
  .booking-aside .info-card:not(.contact-mini) h4{font-size:.74rem;line-height:1.2;margin:0;}
  .booking-aside .info-card:not(.contact-mini) p{
    max-height:0;overflow:hidden;opacity:0;margin-top:0;font-size:.72rem;line-height:1.4;
    transition:max-height .38s var(--ease),opacity .3s ease,margin-top .38s var(--ease);}
  .booking-aside .info-card:not(.contact-mini).is-open p{max-height:260px;opacity:1;margin-top:8px;}
  .booking-aside .info-card:not(.contact-mini) .bk-toggle{display:flex;align-items:center;justify-content:center;
    position:absolute;top:9px;right:8px;width:18px;height:18px;color:var(--blue);pointer-events:none;
    transition:transform .35s var(--ease);}
  .booking-aside .info-card:not(.contact-mini) .bk-toggle svg{width:15px;height:15px;}
  .booking-aside .info-card:not(.contact-mini).is-open .bk-toggle{transform:rotate(180deg);}
  .booking-aside .info-card:not(.contact-mini).is-open{border-color:var(--blue);box-shadow:0 10px 26px rgba(7,24,41,.08);}
}

/* ---- Mobile fixes: booking field heights + FAQ search spacing ---- */
@media (max-width:560px){
  /* every single-line field shares one height, so date & time line up with the rest on iOS */
  .field input[type="text"],.field input[type="email"],.field input[type="tel"],
  .field input[type="number"],.field input[type="search"],.field input[type="url"],
  .field input[type="date"],.field input[type="time"],.field select{
    height:48px;line-height:normal;}
  .field input[type="date"],.field input[type="time"]{
    -webkit-appearance:none;-moz-appearance:none;appearance:none;min-height:0;}
  /* keep the help-center search bar clear of the banner's bottom edge */
  .page-hero .search-bar{margin-bottom:34px;}
}

/* Help Center search bar — left-aligned on laptops/desktops (stays centered on phones) */
@media (min-width:561px){
  .page-hero .search-bar{margin-left:0;margin-right:auto;}
}