/* 
=============================================================
|  Tred-Mark Communications | Developed by Javorsky Studio  |
|   Viewing File: ~/public-site/assets/css/responsive.css   |
| --- Styling/CSS for ViewPort Tweaking (Mobile/Tablet) --- |
============================================================= 
*/

/*
  RESPONSIVE.CSS LOAD ORDER
  -------------------------
  Load this file AFTER:
  1. tokens.css
  2. elements.css
  3. the current page CSS file

  Suggested breakpoints covered:
  - 1680px : large desktop / smaller rectangle monitors
  - 1440px : large laptop / common desktop width
  - 1366px : standard laptop
  - 1280px : small laptop / older desktop
  - 1180px : header squeeze point
  - 1024px : large tablet / small laptop
  - 980px  : mobile nav switch
  - 900px  : tablet stacking
  - 820px  : iPad portrait / large tablet portrait
  - 768px  : small tablet
  - 640px  : large phone / small tablet
  - 560px  : regular phone
  - 480px  : small phone
  - 390px  : narrow iPhone-class devices
  - 360px  : very small phones
*/

/* =========================================================
   00. Global Fluid Defaults
   ========================================================= */

@media (max-width:1280px){
  html{
    overflow-x:hidden;
  }

  body{
    overflow-x:hidden;
  }

  img,
  svg,
  video,
  canvas{
    max-width:100%;
  }

  .container{
    width:min(var(--container), calc(100% - 2*var(--space-4)));
  }

  .card,
  .about-hero,
  .about-copy,
  .about-highlight-card,
  .cta-card,
  .contact-hero,
  .contact-info-card,
  .contact-form-card,
  .contact-map-card,
  .office-hours-card,
  .staff-card,
  .service-item,
  .partners-cta-card,
  .tm-gallery-card,
  .construction-card{
    max-width:100%;
  }
}

/* Improve mobile tap targets without changing desktop density. */
@media (max-width:980px){
  a,
  button,
  summary,
  .btn,
  .iconbtn,
  .staff-contact-icon,
  .tm-tags-btn,
  .tm-tag-row{
    -webkit-tap-highlight-color:rgba(125,227,255,.18);
  }
}

/* =========================================================
   01. Large Desktop / Smaller Rectangle Monitors
   ========================================================= */

@media (max-width:1680px){
  :root{
    --container:1120px;
  }

  .home-landing-title{
    right:clamp(28px, 8vw, 150px);
  }
}

/* =========================================================
   02. Large Laptops / 1440-class Screens
   ========================================================= */

@media (max-width:1440px){
  :root{
    --container:1080px;
    --space-7:64px;
  }

  .home-landing-title{
    right:clamp(24px, 6vw, 110px);
  }

  .home-landing-text{
    font-size:clamp(40px, 4.4vw, 72px);
  }

  .hero-title{
    font-size:40px;
  }

  .lowvolt-title span{
    font-size:clamp(52px, 4.4vw, 66px);
  }

  .about-hero h1,
  .directory-hero h1,
  .partners-hero h1{
    font-size:clamp(2.6rem, 5.8vw, 5.75rem);
  }

  .services-hero h1{
    font-size:clamp(2.6rem, 4.5vw, 4.9rem);
  }
}

/* =========================================================
   03. Standard Laptop / 1366-class Screens
   ========================================================= */

@media (max-width:1366px){
  :root{
    --container:1040px;
  }

  .page-home .home-landing-img{
    content:url("/assets/media/home/head-img-tablet.webp");
  }

  .header-inner{
    gap:var(--space-3);
  }

  .brand{
    min-width:200px;
  }

  .site-nav{
    gap:8px;
  }

  .nav-link,
  .nav-linkBlank{
    padding:8px 8px;
  }

  .hero-v2{
    grid-template-columns:1.35fr 1fr;
  }

  .flip-grid{
    gap:12px;
  }

  .mfg-logo-grid{
    grid-template-columns:repeat(4, minmax(0, 1fr));
  }

  .directory-grid{
    gap:.9rem;
  }
}

/* =========================================================
   04. Small Laptops / Older Desktop Widths
   ========================================================= */

@media (max-width:1280px){
  :root{
    --container:1000px;
    --space-5:28px;
    --space-6:42px;
  }

  .brand-name{
    font-size:15px;
  }

  .brand-sub{
    font-size:11px;
  }

  .contact-layout{
    grid-template-columns:.9fr 1.1fr;
  }

  .about-content{
    gap:var(--space-3);
  }

  .hero-desc{
    margin-left:0;
  }

  .stat-icon{
    width:78px;
    height:78px;
  }

  .lowvolt-stat{
    padding-left:62px;
  }

  .services-hero-map{
    width:min(900px, 78vw);
  }
}

/* =========================================================
   05. Header Squeeze / Small Rectangle Monitors
   ========================================================= */

@media (max-width:1180px){
  :root{
    --container:960px;
  }

  .header-inner{
    padding:12px 0;
  }

  .brand-logo{
    width:40px;
    height:40px;
    max-width:40px;
    max-height:40px;
  }

  .brand{
    min-width:180px;
    gap:10px;
  }

  .site-nav{
    gap:4px;
  }

  .nav-link,
  .nav-linkBlank{
    font-size:13px;
    padding:7px 7px;
  }

  .quick-contact .iconbtn{
    width:32px;
    height:32px;
  }

  .hero-v2{
    grid-template-columns:1fr;
  }

  .hero-right{
    min-height:auto;
  }

  .lowvolt-card{
    gap:22px;
  }

  .lowvolt-stats{
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:16px;
  }

  .lowvolt-stat{
    min-height:92px;
  }

  .contact-layout{
    grid-template-columns:1fr;
  }

  .contact-left-column{
    position:relative;
    top:auto;
    grid-template-columns:repeat(2, minmax(0,1fr));
    grid-template-rows:auto;
  }
}

/* =========================================================
   06. Large Tablet / Small Laptop
   ========================================================= */

@media (max-width:1024px){
  :root{
    --container:920px;
    --space-4:22px;
    --space-5:26px;
    --space-7:58px;
  }

  main{
    padding-top:var(--header-offset, 84px);
  }

  .page-home main{
    margin-top:-64px;
  }

  .home-landing-title{
    top:25%;
    right:clamp(22px, 5vw, 70px);
    max-width:78vw;
  }

  .home-landing-text{
    font-size:clamp(38px, 5.2vw, 60px);
  }

  .page-home .hero{
    padding-top:104px;
  }

  .services-wide-head{
    align-items:flex-start;
    flex-direction:column;
  }

  .about-content{
    grid-template-columns:1fr 1fr;
  }

  .about-copy,
  .capabilities-mini-card{
    grid-column:1 / -1;
  }

  .mission-mini-card,
  .vision-mini-card{
    grid-column:auto;
  }

  .partners-split{
    grid-template-columns:1fr;
  }

  .vendor-grid{
    max-width:720px;
  }

  .directory-group-shared{
    grid-template-columns:1fr;
  }

  .shared-staff-block .staff-card-wide,
  .general-contact-block .staff-card{
    min-height:auto;
    max-height:none;
  }

  .construction-card{
    width:min(700px, 100%);
  }
}

/* =========================================================
   07. Mobile Navigation Switch / Tablet Portrait
   ========================================================= */

@media (max-width:980px){
  :root{
    --header-offset:76px;
  }

  .container{
    width:min(var(--container), calc(100% - 2rem));
  }

  .site-nav,
  .quick-contact{
    display:none;
  }

  .nav-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }

  .header-inner{
    min-height:76px;
  }

  .mobile-nav{
    max-height:calc(100vh - var(--header-offset, 76px));
    overflow:auto;
  }

  .mobile-nav-inner{
    padding:14px 0 20px;
  }

  .mobile-link{
    font-size:1rem;
  }

  .grid-3{
    grid-template-columns:1fr;
  }

  .hero-v2,
  .hero-inner{
    grid-template-columns:1fr;
  }

  .lowvolt-stats{
    grid-template-columns:1fr;
  }

  .flip-grid{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }

  .tm-gallery-grid{
    columns:3 240px;
  }
}

/* =========================================================
   08. Tablet Stacking / Square Monitors
   ========================================================= */

@media (max-width:900px){
  :root{
    --space-6:38px;
    --space-7:52px;
  }

  .about-page,
  .contact-page{
    padding:6rem 1rem 3rem;
  }

  .about-content{
    grid-template-columns:1fr;
  }

  .about-copy,
  .mission-mini-card,
  .vision-mini-card,
  .capabilities-mini-card{
    grid-column:auto;
    grid-row:auto;
  }

  .capabilities-grid{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }

  .contact-left-column{
    grid-template-columns:1fr;
  }

  .contact-layout{
    grid-template-columns:1fr;
  }

  .contact-info-card{
    position:relative;
    top:auto;
  }

  .directory-grid{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }

  .staff-card-wide,
  .staff-card-supWide{
    grid-column:auto;
  }

  .mfg-logo-grid,
  .industry-grid{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }

  .training-grid,
  .partners-split{
    grid-template-columns:1fr;
  }

  .services-hero-inner{
    grid-template-columns:1fr;
  }

  .services-hero-map{
    width:900px;
    left:58%;
    opacity:.22;
  }

  .footer-inner{
    flex-direction:column;
    text-align:center;
  }

  .footer-brand{
    justify-content:center;
  }

  .footer-slogan{
    text-align:center;
  }
}

/* Square / short desktop monitors: reduce vertical hero spacing. */
@media (max-height:820px) and (min-width:900px){
  .partners-hero,
  .services-hero,
  .directory-hero{
    padding-top:clamp(5.5rem, 9vh, 7rem);
    padding-bottom:clamp(3rem, 6vh, 4.5rem);
  }

  .about-page,
  .contact-page{
    padding-top:clamp(5.5rem, 9vh, 7rem);
  }

  .home-landing-title{
    top:22%;
  }

  .home-scroll-cue{
    bottom:18px;
  }
}

/* =========================================================
   09. Large Tablet Portrait / iPad Widths
   ========================================================= */

@media (max-width:820px){
  .home-landing-title{
    left:2rem;
    right:2rem;
    max-width:none;
  }

  .home-landing-text{
    white-space:normal;
    font-size:clamp(40px, 9vw, 64px);
  }

  .home-landing-subtitle{
    text-align:left;
    max-width:640px;
  }

  .hero-title{
    font-size:clamp(32px, 7vw, 42px);
  }

  .line-2,
  .line-3{
    margin-left:0;
  }

  .cert-logo-track img{
    height:50px;
  }

  .contact-hero,
  .about-hero{
    padding:clamp(2rem, 5vw, 3rem);
  }

  .directory-hero,
  .partners-hero,
  .services-hero{
    padding-top:clamp(6rem, 14vw, 8rem);
  }

  .tm-filter-tags .tm-tags-pop{
    position:fixed;
    left:16px;
    right:16px;
    top:calc(var(--header-offset, 76px) + 44px);
    width:auto;
    max-width:none;
  }

  .tm-filter-grid{
    grid-template-columns:1fr;
  }
}

/* =========================================================
   10. Small Tablet / Landscape Phones
   ========================================================= */

@media (max-width:768px){
  .container{
    width:min(var(--container), calc(100% - 1.75rem));
  }

  .card,
  .about-copy,
  .about-highlight-card,
  .contact-info-card,
  .contact-form-card,
  .office-hours-card,
  .staff-card,
  .service-item,
  .mfg-card,
  .vendor-card,
  .partners-cta-card{
    border-radius:18px;
  }

  .form-grid{
    grid-template-columns:1fr;
  }

  .hours-row{
    align-items:flex-start;
  }

  .map-frame{
    min-height:340px;
  }

  .directory-group{
    margin-bottom:2.4rem;
  }

  .directory-group-title{
    font-size:1.15rem;
  }

  .staff-card h2{
    font-size:1.08rem;
  }

  .staff-contact-icon{
    width:40px;
    height:40px;
  }

  .industry-grid{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }

  .tm-gallery-toolbar,
  .tm-gallery-right{
    align-items:stretch;
  }

  .tm-gallery-right,
  .tm-filter,
  .tm-gallery-search,
  .tm-tags-btn,
  #filtersReset{
    width:100%;
  }

  .tm-tags-list{
    max-height:55vh;
  }

  .tm-filter-col-body{
    max-height:220px;
  }

  .tm-lightbox-body{
    grid-template-columns:36px 1fr 36px;
  }

  .tm-lb-nav{
    width:36px;
    height:42px;
  }
}

/* =========================================================
   11. Large Phones / Small Tablets
   ========================================================= */

@media (max-width:640px){
  :root{
    --space-3:14px;
    --space-4:18px;
    --space-5:22px;
    --space-6:34px;
    --space-7:44px;
    --radius:14px;
  }

  .container{
    width:min(var(--container), calc(100% - 1.25rem));
  }

  .brand{
    min-width:0;
  }

  .brand-text{
    max-width:230px;
  }

  .brand-name{
    font-size:14px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .brand-sub{
    font-size:10px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .page-home .home-landing-img{
    content:url("/assets/media/home/head-img-mobile.webp");
  }

  .page-home .home-landing{
    min-height:520px;
  }

  .home-landing-title{
    top:28%;
    left:var(--space-4);
    right:var(--space-4);
  }

  .home-landing-text{
    white-space:normal;
    font-size:clamp(34px, 12vw, 48px);
  }

  .home-landing-subtitle{
    text-align:left;
    font-size:clamp(14px, 4vw, 18px);
  }

  .page-home main{
    margin-top:-56px;
  }

  .page-home .hero{
    padding-top:90px;
  }

  .hero-right{
    padding:18px;
  }

  .hero-desc{
    margin:1rem 0 var(--space-4);
    text-align:left;
  }

  .hero-actions,
  .services-hero-actions,
  .partners-cta-actions,
  .cta-actions,
  .construction-actions{
    flex-direction:column;
    align-items:stretch;
  }

  .hero-actions .btn,
  .services-hero-actions .btn,
  .partners-cta-actions .btn,
  .cta-actions .btn,
  .construction-actions .btn{
    width:100%;
  }

  .flip-grid,
  .capabilities-grid,
  .directory-grid,
  .mfg-logo-grid,
  .vendor-grid,
  .industry-grid{
    grid-template-columns:1fr;
  }

  .flip-card,
  .flip-inner{
    min-height:100px;
    height:100px;
  }

  .lowvolt-title span{
    font-size:clamp(44px, 15vw, 58px);
  }

  .contact-hero,
  .about-hero{
    padding:2rem 1.25rem;
  }

  .contact-info-card,
  .contact-form-card,
  .contact-map-card,
  .office-hours-card,
  .about-copy,
  .about-highlight-card,
  .cta-card{
    padding:1.25rem;
  }

  .map-frame{
    min-height:320px;
  }

  .services-hero-map{
    width:760px;
    left:62%;
    opacity:.18;
  }

  .service-item summary{
    flex-direction:column;
  }

  .service-item summary small{
    text-align:left;
  }

  .service-details,
  .service-item summary{
    padding-left:1.1rem;
    padding-right:1.1rem;
  }

  .mfg-card,
  .vendor-card{
    min-height:118px;
  }

  .mfg-logo,
  .vendor-logo{
    max-width:170px;
    max-height:62px;
  }

  .training-grid{
    grid-template-columns:1fr;
  }

  .tm-gallery-card{
    padding:16px;
    border-radius:18px;
  }

  .tm-gallery-grid{
    columns:1 260px;
  }

  .tm-lightbox-card{
    width:calc(100vw - 24px);
    margin:5vh auto 0;
    max-height:88vh;
  }

  .tm-lightbox-media img{
    max-height:52vh;
  }

  .footer-links{
    flex-wrap:wrap;
    justify-content:center;
    gap:14px;
  }
}

/* =========================================================
   12. Regular Phones
   ========================================================= */

@media (max-width:560px){
  .about-page,
  .contact-page,
  .directory-section,
  .partners-section,
  .services-list-section{
    padding-left:1rem;
    padding-right:1rem;
  }

  .about-hero h1,
  .contact-hero h1,
  .directory-hero h1,
  .partners-hero h1,
  .services-hero h1{
    font-size:clamp(2.35rem, 15vw, 4rem);
    letter-spacing:-.06em;
  }

  .section-head h2,
  .partners-split h2,
  .partners-cta-card h2,
  .cta-card h2{
    font-size:clamp(1.9rem, 10vw, 3rem);
  }

  .directory-hero,
  .partners-hero,
  .services-hero{
    padding-left:1rem;
    padding-right:1rem;
  }

  .directory-hero p,
  .partners-hero-copy,
  .services-hero-copy p,
  .contact-hero p:not(.eyebrow),
  .about-hero p{
    font-size:1rem;
  }

  .staff-card-supWide,
  .staff-card-wide{
    grid-column:auto;
  }

  .general-contact-block .staff-card{
    min-height:auto;
    max-height:none;
  }

  .login-contact{
    flex-direction:column;
    align-items:flex-start;
    gap:.75rem;
  }

  .login-contact-row:last-child{
    text-align:left;
    align-items:flex-start;
  }

  .construction-page{
    padding:1rem;
  }

  .construction-brand img{
    width:128px;
    height:128px;
  }
}

/* =========================================================
   13. Small Phones
   ========================================================= */

@media (max-width:480px){
  :root{
    --header-offset:72px;
    --space-4:16px;
    --space-5:18px;
  }

  .container{
    width:calc(100% - 1rem);
  }

  .header-inner{
    min-height:72px;
    gap:10px;
  }

  .brand-logo{
    width:36px;
    height:36px;
    max-width:36px;
    max-height:36px;
  }

  .brand-text{
    max-width:190px;
  }

  .brand-name{
    font-size:13px;
  }

  .brand-sub{
    font-size:9.5px;
  }

  .nav-toggle{
    width:40px;
    height:40px;
    border-radius:11px;
  }

  .mobile-nav{
    max-height:calc(100vh - 72px);
  }

  .home-landing-title{
    top:25%;
  }

  .home-landing-text{
    font-size:clamp(31px, 13vw, 42px);
  }

  .home-scroll-cue{
    width:44px;
    height:44px;
    bottom:18px;
  }

  .hero-title{
    font-size:clamp(28px, 10vw, 36px);
  }

  .trail1,
  .trail2,
  .trail3{
    margin-left:.25rem;
  }

  .cert-logo-track{
    gap:20px;
  }

  .cert-logo-track img{
    height:44px;
  }

  .lowvolt-stat{
    padding-left:54px;
    min-height:82px;
  }

  .stat-icon{
    width:68px;
    height:68px;
  }

  .stat-number{
    font-size:clamp(32px, 11vw, 44px);
  }

  .strip{
    padding:1.25rem;
  }

  .hours-row{
    flex-direction:column;
    gap:.2rem;
  }

  .contact-form input,
  .contact-form select,
  .contact-form textarea,
  .field-input{
    padding:.85rem .9rem;
  }

  .directory-group-title{
    font-size:1.05rem;
  }

  .staff-card{
    padding:1.15rem;
  }

  .staff-contact-row{
    gap:.65rem;
  }

  .staff-contact-icon{
    width:38px;
    height:38px;
    padding:5px;
  }

  .services-hero-map{
    width:680px;
    left:66%;
    opacity:.16;
  }

  .service-item summary span{
    font-size:1.03rem;
  }

  .tm-lightbox-body{
    grid-template-columns:1fr;
  }

  .tm-lb-nav{
    display:none;
  }

  .tm-tags-pop-actions{
    flex-direction:column;
  }

  .tm-tags-pop-actions .btn{
    width:100%;
  }

  .construction-card{
    padding:1.5rem 1.1rem;
  }

  .construction-icon i{
    font-size:3.25rem;
  }
}

/* =========================================================
   14. Narrow Phones
   ========================================================= */

@media (max-width:390px){
  .brand-text{
    max-width:165px;
  }

  .brand-name{
    font-size:12px;
  }

  .brand-sub{
    display:none;
  }

  .home-landing-text{
    font-size:clamp(29px, 14vw, 38px);
  }

  .home-landing-subtitle{
    font-size:13px;
  }

  .about-hero h1,
  .contact-hero h1,
  .directory-hero h1,
  .partners-hero h1,
  .services-hero h1{
    font-size:clamp(2.1rem, 15vw, 3.4rem);
  }

  .btn{
    padding:10px 12px;
  }

  .footer-brand{
    flex-direction:column;
    gap:6px;
  }

  .footer-logo{
    width:44px;
    height:44px;
  }
}

@media (max-width:360px){
  .container{
    width:calc(100% - .75rem);
  }

  .brand-text{
    max-width:142px;
  }

  .brand-logo{
    width:34px;
    height:34px;
  }

  .home-landing-text{
    font-size:30px;
  }

  .staff-card h2,
  .service-item summary span{
    font-size:1rem;
  }

  .mfg-logo,
  .vendor-logo{
    max-width:150px;
  }
}

/* =========================================================
   15. High-Resolution / Wide Screens
   ========================================================= */

@media (min-width:1681px){
  :root{
    --container:1180px;
  }

  .home-landing-title{
    right:clamp(80px, 12vw, 240px);
  }
}

@media (min-width:1920px){
  :root{
    --container:1240px;
  }

  .home-landing-text{
    font-size:clamp(72px, 4.5vw, 96px);
  }

  .home-landing-subtitle{
    font-size:clamp(22px, 1.3vw, 32px);
  }

  .services-hero-map{
    width:min(1120px, 68vw);
  }
}

@media (min-width:2400px){
  :root{
    --container:1320px;
  }

  .page-home .home-landing-img,
  .page-home main::before,
  .page-about,
  .page-contact::before,
  .page-directory,
  .page-partners,
  .page-services,
  .page-under-construction{
    background-size:cover;
  }
}

/* =========================================================
   16. Touch / Accessibility Safety
   ========================================================= */

@media (hover:none){
  .flip-card:hover .flip-inner{
    transform:none;
  }

  .flip-back{
    display:none;
  }

  .mfg-card:hover,
  .vendor-card:hover,
  .partner-card:hover,
  .staff-contact-icon:hover,
  .service-item:hover,
  .tm-gallery-item:hover{
    transform:none;
  }
}

@media (prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
    transition-duration:.001ms !important;
  }
}

/* iOS/Safari friendliness: fixed background can jitter on mobile. */
@media (max-width:900px){
  .page-about,
  .page-directory,
  .page-partners,
  .page-services{
    background-attachment:scroll;
  }
}