/* ==========================================================
   CANTAIMY v6.4 — Responsive Header
   Fixes account-card and hero scaling as one coordinated area.
   ========================================================== */

/* Header uses flexible fractions rather than brittle fixed pixels */
.v6-header{
  display:grid !important;
  grid-template-columns:
    minmax(430px, 1.62fr)
    minmax(210px, .62fr)
    minmax(300px, .90fr) !important;
  gap:clamp(16px,1.25vw,26px) !important;
  align-items:start !important;
}

/* ---------- account card ---------- */
.v6-account{
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  align-self:start !important;
}

.v6-account-card{
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  overflow:hidden !important;
}

.v6-account-card .v6-user-chip{
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
}

.v6-account-card .v6-user-chip #userName{
  min-width:0 !important;
  max-width:none !important;
  flex:1 1 auto !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

/* Actions get enough width; no clipping */
.v6-account-actions,
.v61-account-actions{
  width:100% !important;
  min-width:0 !important;
  display:grid !important;
  grid-template-columns:72px minmax(108px,1fr) !important;
  gap:7px !important;
}

.v6-mini-action{
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  padding:0 9px !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

#logoutBtn.v6-mini-action{
  min-width:108px !important;
  font-size:10px !important;
}

/* ---------- hero ---------- */
.v6-hero{
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  height:138px !important;
  overflow:hidden !important;
}

.v6-hero-copy{
  left:8px !important;
  top:18px !important;
  width:48% !important;
  max-width:220px !important;
  transform:rotate(-2deg) !important;
}

.v6-hero-copy em,
.v6-hero-copy strong{
  font-size:clamp(18px,1.28vw,23px) !important;
  line-height:.98 !important;
}

.v6-hero-copy strong{
  margin-top:6px !important;
}

.v6-hero img{
  right:0 !important;
  width:auto !important;
  height:138px !important;
  max-height:138px !important;
  max-width:54% !important;
  object-fit:contain !important;
  object-position:right bottom !important;
}

/* ---------- desktop scaling ---------- */
@media(min-width:1600px){
  .v6-header{
    grid-template-columns:
      minmax(520px,1.65fr)
      minmax(230px,.62fr)
      minmax(390px,1fr) !important;
  }

  .v6-account-actions,
  .v61-account-actions{
    grid-template-columns:78px minmax(120px,1fr) !important;
  }
}

@media(max-width:1599px) and (min-width:1350px){
  .v6-header{
    grid-template-columns:
      minmax(470px,1.55fr)
      minmax(215px,.65fr)
      minmax(350px,1fr) !important;
  }
}

@media(max-width:1349px) and (min-width:1100px){
  .v6-header{
    grid-template-columns:
      minmax(400px,1.5fr)
      minmax(200px,.68fr)
      minmax(300px,1fr) !important;
    gap:14px !important;
  }

  .v6-account-actions,
  .v61-account-actions{
    grid-template-columns:64px minmax(104px,1fr) !important;
    gap:5px !important;
  }

  #logoutBtn.v6-mini-action{
    min-width:104px !important;
    font-size:9.5px !important;
  }

  .v6-hero-copy{
    top:16px !important;
    width:47% !important;
    max-width:190px !important;
  }

  .v6-hero-copy em,
  .v6-hero-copy strong{
    font-size:clamp(17px,1.30vw,21px) !important;
  }
}

/* Low-height desktops: reduce height in a coordinated way */
@media(max-height:820px) and (min-width:1100px){
  .v6-header{
    align-items:start !important;
  }

  .v6-account-card{
    padding:6px 7px !important;
  }

  .v6-account-card .v6-user-chip{
    height:34px !important;
    min-height:34px !important;
    margin-bottom:4px !important;
  }

  .v6-account-card .v6-user-chip img{
    width:28px !important;
    height:28px !important;
    min-width:28px !important;
    flex-basis:28px !important;
  }

  .v6-mini-action{
    height:27px !important;
    min-height:27px !important;
  }

  .v6-hero{
    height:132px !important;
  }

  .v6-hero-copy{
    top:14px !important;
    max-width:185px !important;
  }

  .v6-hero img{
    height:132px !important;
    max-height:132px !important;
  }
}

/* Tablet: account + hero become a second row, never clip */
@media(max-width:1099px) and (min-width:700px){
  .v6-header{
    grid-template-columns:minmax(0,1fr) minmax(210px,250px) !important;
    grid-template-areas:
      "intro intro"
      "account hero" !important;
  }

  .v6-intro{grid-area:intro !important}
  .v6-account{grid-area:account !important}
  .v6-hero{grid-area:hero !important}

  .v6-hero{
    height:140px !important;
  }
}

/* Mobile */
@media(max-width:699px){
  .v6-header{
    grid-template-columns:1fr !important;
    grid-template-areas:
      "intro"
      "account" !important;
  }

  .v6-intro{grid-area:intro !important}
  .v6-account{grid-area:account !important}
  .v6-hero{display:none !important}

  .v6-account-actions,
  .v61-account-actions{
    grid-template-columns:72px minmax(120px,1fr) !important;
  }
}