/* Authorized Distributors — component styles
   Scoped under #authorized-distributors (the section's own id) so nothing
   here leaks into the rest of the theme — no :root, *, or body rules.
   Every selector is anchored to that id specifically so it outranks
   page-builder (Elementor) button/element resets, which are almost always
   pure class selectors: an id selector always beats any number of classes
   in CSS specificity, regardless of how many classes are chained. */

#authorized-distributors{
  --card-bg:#4c4c4c;
  --card-border:#d8d8d8;
  --radius:16px;
  --gap:30px;
  --maroon:#701f2e;
  --tan-bg:rgba(229,206,131,.24);
  --tan-text:#701f2e;
  --text-dark:#1a1a1a;
  --text-black:#000000;
  --text-grey:#4c4c4c;
  --divider:#e6e6e6;
  --container-max:1440px;
  --ease:cubic-bezier(.22,1,.36,1);
  --font:'Mona Sans';

  font-family:var(--font);
  color:var(--text-dark);
  width:100%;
  display:block;
}

#authorized-distributors,
#authorized-distributors *{
  box-sizing:border-box;
}

#authorized-distributors .distributors__container{
  max-width:var(--container-max);
  width:100%;
  margin:0 auto;
}

#authorized-distributors .distributors__divider{
  height:1px;
  background:var(--divider);
  margin-bottom:40px;
}

/* ---------- Grid ---------- */

#authorized-distributors .distributors__grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  grid-auto-rows:204px;
  gap:var(--gap);
  position:relative;
  width:100%;
  justify-items:stretch;
}

#authorized-distributors .dist-card{
  position:relative;
  isolation:isolate;
  width:100%;
  min-width:0;
}

/* desktop only: hovered/focused card rises above its siblings so its
   overlay can paint over them (tablet/mobile use their own stacking) */
@media (min-width:1201px){
  #authorized-distributors .dist-card:hover,
  #authorized-distributors .dist-card:focus-within{
    z-index:20;
  }
}

/* ---------- Logo tile (always visible trigger) ---------- */

#authorized-distributors .dist-card__trigger{
  all:unset;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  background:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:var(--radius);
  cursor:pointer;
  box-sizing:border-box;
}

#authorized-distributors .dist-card__logo-box{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:144px;
}

#authorized-distributors .dist-card__logo-box img{
  display:block;
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
}

/* per-company reference box sizes (pixel-matched to design) */
#authorized-distributors .dist-card[data-company="advance-tech"] .dist-card__logo-box img{ max-width:144px; max-height:144px; }
#authorized-distributors .dist-card[data-company="asm"] .dist-card__logo-box img{ max-width:141px; max-height:94px; }
#authorized-distributors .dist-card[data-company="bluestar"] .dist-card__logo-box img{ max-width:240px; max-height:86px; }
#authorized-distributors .dist-card[data-company="copaco"] .dist-card__logo-box img{ max-width:240px; max-height:86px; }

/* ---------- Tablet/mobile "more" arrow (hidden on desktop) ---------- */

#authorized-distributors .dist-card__arrow{
  display:none;
}

/* ---------- Hover / focus content panel (desktop) ---------- */

#authorized-distributors .dist-card__panel{
  position:absolute;
  top:0;
  width:calc(200% + var(--gap));
  height:calc(200% + var(--gap) + 100px);
  background:#fff;
  border:1px solid var(--divider);
  border-radius:var(--radius);
  box-shadow:0 24px 48px -12px rgba(0,0,0,.28), 0 4px 16px rgba(0,0,0,.08);
  opacity:0;
  transform:scale(.96);
  transform-origin:top center;
  pointer-events:none;
  overflow-y:auto;
  padding:20px 28px;
  z-index:5;
}

#authorized-distributors .dist-card[data-col="1"] .dist-card__panel,
#authorized-distributors .dist-card[data-col="2"] .dist-card__panel{
  left:0;
}
#authorized-distributors .dist-card[data-col="2"] .dist-card__panel{
  left:calc(-1 * (100% + var(--gap)));
}
#authorized-distributors .dist-card[data-col="3"] .dist-card__panel{
  left:0;
}
#authorized-distributors .dist-card[data-col="4"] .dist-card__panel{
  left:calc(-1 * (100% + var(--gap)));
}

#authorized-distributors .dist-card[data-row="2"] .dist-card__panel{
  top:calc(-1 * (100% + var(--gap)));
}

#authorized-distributors .dist-card:hover .dist-card__panel,
#authorized-distributors .dist-card:focus-within .dist-card__panel{
  opacity:1;
  transform:scale(1);
  pointer-events:auto;
}

/* transitions are enabled only after first paint, so nothing can ever
   flash mid-fade while the page is first rendering. Closing is instant;
   opening has a short "hover intent" delay so quickly passing over
   tiles doesn't flash them open.
   Note: .js-ready is added to <body>, an ANCESTOR of #authorized-distributors,
   so it stays first in the chain here — the id is still counted toward
   specificity regardless of where it sits in the selector. */
.js-ready #authorized-distributors .dist-card__panel{
  transition:opacity .2s var(--ease), transform .2s var(--ease);
}
.js-ready #authorized-distributors .dist-card:hover .dist-card__panel,
.js-ready #authorized-distributors .dist-card:focus-within .dist-card__panel{
  transition:opacity .28s var(--ease) .18s, transform .28s var(--ease) .18s;
}

/* ---------- Panel content ---------- */

#authorized-distributors .panel__logo{
  display:flex;
  justify-content:center;
  padding:0 0 16px;
}
#authorized-distributors .panel__logo-chip{
  display:flex;
  align-items:center;
  justify-content:center;
}
#authorized-distributors .panel__logo img{
  max-width:200px;
  max-height:100px;
  object-fit:contain;
}

#authorized-distributors .panel__divider{
  height:1px;
  background:var(--divider);
  margin:0 0 16px;
}

#authorized-distributors .panel__name{
  font-size:24px;
  line-height:28px;
  font-weight:700;
  color:var(--maroon);
  margin:0 0 16px;
}

#authorized-distributors .panel__website{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:18px;
  font-weight:400;
  color:var(--text-black);
  text-decoration:underline;
  margin-bottom:16px;
}
#authorized-distributors .panel__website img{ width:16px; height:16px; }

#authorized-distributors .panel__label{
  font-size:16px;
  font-weight:500;
  color:var(--text-black);
  margin:0 0 6px;
}

#authorized-distributors .panel__areas{
  display:flex;
  flex-wrap:wrap;
  gap:10px 4px;
  margin-bottom:16px;
}
#authorized-distributors .panel__area{
  background:var(--tan-bg);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  color:var(--tan-text);
  font-size:12px;
  font-weight:500;
  padding:4px 10px;
  border-radius:64px;
  white-space:nowrap;
}

#authorized-distributors .panel__person{
  font-size:20px;
  line-height:26px;
  font-weight:700;
  color:var(--maroon);
  margin:0 0 4px;
}
#authorized-distributors .panel__title{
  font-size:14px;
  font-weight:500;
  color:var(--text-black);
  margin:0 0 8px;
}
#authorized-distributors .panel__address{
  font-size:14px;
  line-height:1.4;
  font-weight:400;
  color:var(--text-grey);
  margin:0 0 16px;
}

#authorized-distributors .panel__fields{
  display:flex;
  flex-direction:column;
  gap:5px;
  font-size:16px;
}
#authorized-distributors .panel__field{
  display:flex;
  gap:5px;
  flex-wrap:wrap;
}
#authorized-distributors .panel__field-label{
  font-weight:600;
  color:var(--maroon);
}
#authorized-distributors .panel__field-value{
  font-weight:500;
  color:var(--text-black);
}
#authorized-distributors .panel__field-value a{
  color:var(--text-black);
  text-decoration:underline;
}

/* ---------- Shared "active company" overlay (tablet only) ---------- */

#authorized-distributors .distributors__tablet-panel{
  display:none;
}

/* ---------- Tablet + Mobile shared (≤1200px) ----------
   the arrow moves inside the tile itself, below the logo, so both the
   trigger layout and the logo box get shorter to make room for it. */

@media (max-width:1200px){

  #authorized-distributors .dist-card__trigger{
    flex-direction:column;
    gap:8px;
  }

  #authorized-distributors .dist-card__logo-box{
    height:110px;
  }

  #authorized-distributors .dist-card[data-company="advance-tech"] .dist-card__logo-box img{ max-width:108px; max-height:108px; }
  #authorized-distributors .dist-card[data-company="asm"] .dist-card__logo-box img{ max-width:104px; max-height:70px; }
  #authorized-distributors .dist-card[data-company="bluestar"] .dist-card__logo-box img{ max-width:178px; max-height:64px; }
  #authorized-distributors .dist-card[data-company="copaco"] .dist-card__logo-box img{ max-width:178px; max-height:64px; }

  #authorized-distributors .dist-card__arrow{
    display:flex;
    align-items:center;
    justify-content:center;
    color: #701f2e;
        background: #fff;
        border-radius: 100px;
        padding: 5px;
  }
  #authorized-distributors .dist-card__arrow svg{
    width:20px;
    height:20px;
    transition:transform .25s var(--ease);
  }
}

/* ---------- Tablet ("iPad"): 768px–1200px ----------
   2-column grid; the active company overlays the top 2 rows (4 blocks)
   instead of pushing the rest of the grid down. */

@media (min-width:768px) and (max-width:1200px){

  #authorized-distributors .distributors__grid{
    grid-template-columns:repeat(2, 1fr);
    grid-auto-rows:204px;
  }

  #authorized-distributors .distributors__tablet-panel{
    display:block;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:calc(2 * 204px + var(--gap));
    background:#fff;
    border:1px solid var(--divider);
    border-radius:var(--radius);
    box-shadow:0 24px 48px -12px rgba(0,0,0,.28), 0 4px 16px rgba(0,0,0,.08);
    opacity:0;
    transform:scale(.98);
    transform-origin:top center;
    pointer-events:none;
    overflow-y:auto;
    padding:20px 28px;
    z-index:10;
    transition:opacity .24s var(--ease), transform .24s var(--ease);
  }

  #authorized-distributors .distributors__tablet-panel.is-open{
    opacity:1;
    transform:scale(1);
    pointer-events:auto;
  }

  #authorized-distributors .tablet-panel__close{
    all:unset;
    box-sizing:border-box;
    position:absolute;
    top:14px;
    right:14px;
    width:32px;
    height:32px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#f5f5f6;
    color:var(--text-grey);
    cursor:pointer;
    transition:background .2s var(--ease);
  }
  #authorized-distributors .tablet-panel__close:hover{ background:#ececed; }
  #authorized-distributors .tablet-panel__close svg{ width:13px; height:13px; }

  #authorized-distributors .dist-card__trigger{
    height:100%;
    transition:box-shadow .2s var(--ease);
  }

  /* the overlay always covers these 4 cards regardless of which one is
     active, so their ring would only ever peek out from behind it */
  #authorized-distributors .dist-card:not(.dist-card--zone-top).is-active .dist-card__trigger{
    box-shadow:0 0 0 2px var(--maroon);
  }

  /* per-card desktop hover panel is irrelevant here; the shared overlay above replaces it */
  #authorized-distributors .dist-card__panel{
    display:none;
  }

  #authorized-distributors .dist-card.is-active .dist-card__arrow svg{
    transform:rotate(180deg);
  }
}

/* ---------- Mobile: ≤767px ----------
   original single-column accordion — each card expands inline directly
   below itself; independent from the tablet behaviour above. */

@media (max-width:767px){

  #authorized-distributors .distributors__grid{
    grid-template-columns:1fr;
    grid-auto-rows:auto;
  }

  #authorized-distributors .dist-card__trigger{
    height:204px;
  }

  #authorized-distributors .dist-card.is-open .dist-card__arrow svg{
    transform:rotate(180deg);
  }

  #authorized-distributors .dist-card__panel{
    position:static;
    width:100%;
    height:0;
    opacity:1;
    transform:none;
    box-shadow:none;
    background:transparent;
    border:1px solid transparent;
    border-top:none;
    border-radius:0 0 var(--radius) var(--radius);
    overflow:hidden;
    padding:0 24px;
    pointer-events:auto;
    transition:height .32s var(--ease), padding .32s var(--ease), border-color .32s var(--ease), background-color .32s var(--ease);
    margin-top:calc(-1 * var(--gap) + 10px);
  }

      #authorized-distributors .dist-card.is-open .dist-card__panel {
        height: var(--panel-h, auto);
        padding: 22px 24px 26px;
        border-color: var(--divider);
        background: #fff;
        border-radius: 16px;
        margin-top: 20px;
    }

  #authorized-distributors .dist-card.is-open .dist-card__trigger {
    display: none;
}
}