/* DESIGN SYSTEM — Team Building / Workshop editorial patterns
   Canonical shared rules for team-building narratives, workshop cards and review loops.
   Hero media brightness and matte are intentionally not defined here; every detail page
   consumes the shared Hero visual contract from components/hero.css. */

/* Page shell --------------------------------------------------------------- */
.himart-team-page{background:#000;color:#fff}

/* 01 — role / direction ---------------------------------------------------- */
.himart-team-page .team-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;width:100%}
.himart-team-page .team-card{min-width:0;min-height:250px;padding:24px 0 28px;border:0;border-top:1px solid rgba(255,255,255,.20);background:transparent;display:flex;flex-direction:column;justify-content:space-between;text-align:left}
.himart-team-page .team-card>span{display:block;margin:0;padding:0;font-family:var(--hm-font-en);font-size:12px;line-height:1.2;letter-spacing:.08em;color:var(--hm-blue);text-align:left}
.himart-team-page .team-card strong{display:block;margin-top:42px;color:var(--hm-blue);font-family:var(--hm-font-ko);font-size:28px;line-height:1.3;font-weight:300;font-variation-settings:"wght" 300;letter-spacing:var(--hm-track-group);text-align:left;word-break:keep-all}
.himart-team-page .team-card p{margin:14px 0 0;max-width:38ch;font-size:16px;line-height:1.62;color:rgba(255,255,255,.58);text-align:left;word-break:keep-all}

.himart-team-page .team-turning-point{padding:54px 0 0;border-top:1px solid rgba(255,255,255,.15)}
.himart-team-page .team-turning-point__copy{max-width:980px;margin:0;font-size:clamp(30px,3.2vw,54px);line-height:1.24;letter-spacing:-.055em;font-weight:500;color:var(--hm-blue)}
.himart-team-page .team-turning-point__copy strong{font-weight:500;color:var(--hm-blue)}

/* Shared agenda grammar — used by 02.1 and 04.1 ---------------------------- */
.himart-team-page .team-agenda{--team-agenda-columns:5;display:grid;grid-template-columns:repeat(var(--team-agenda-columns),minmax(0,1fr));gap:28px;width:100%;border:0}
.himart-team-page .team-agenda--four{--team-agenda-columns:4}
.himart-team-page .team-agenda article{min-width:0;min-height:0;padding:24px 0 28px;border:0;border-top:1px solid var(--hm-line-content-divider,var(--hm-line-weak))}
.himart-team-page .team-agenda span{display:block;color:var(--hm-blue);font:400 12px/1.2 var(--hm-font-en);letter-spacing:var(--hm-track-note)}
.himart-team-page .team-agenda strong{display:block;min-height:64px;margin:32px 0 0;color:#fff;font-family:var(--hm-font-ko);font-size:24px;font-weight:100;font-variation-settings:"wght" 100;line-height:1.3;letter-spacing:var(--hm-track-group);word-break:keep-all}
.himart-team-page .team-agenda p{margin:16px 0 0;max-width:22ch;color:var(--hm-description-color);font-family:var(--hm-font-ko);font-size:16px;font-weight:300;font-variation-settings:"wght" 300;line-height:1.5;letter-spacing:var(--hm-track-body);word-break:keep-all}

/* Shared 16:9 image + overlay-card contract --------------------------------
   - media width: 100%
   - overlay width: 90% of media
   - overlay height: 35% (7/20) of media height
   - overlap with media: 1/3 of overlay height
   - outside portion: 2/3 of overlay height
   For 16:9 media, 90%-wide overlay at aspect-ratio 32/7 is exactly 35% of media height. */
.himart-team-page .team-workshop-visual{position:relative;width:100%;padding:0}
.himart-team-page .team-workshop-visual__image{position:relative;width:100%;aspect-ratio:16/9;background:#000;overflow:visible}
.himart-team-page .team-workshop-visual__image>img{position:absolute;z-index:0;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.himart-team-page .team-workshop-visual__image::after{display:none;content:none}
.himart-team-page{
  --team-workshop-divider:rgba(255,255,255,.10);
  --team-workshop-number-title-gap:32px;
}
.himart-team-page :is(.team-workshop-visual--people,.team-workshop-visual--strengths,.team-workshop-visual--voices,.team-workshop-visual--core) .team-workshop-visual__cards{
  position:relative;
  z-index:2;
  right:auto;
  bottom:auto;
  left:auto;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  width:100%;
  min-height:220px;
  aspect-ratio:auto;
  margin-top:24px;
  transform:none;
  background:transparent;
  overflow:visible;
}
.himart-team-page :is(.team-workshop-visual--people,.team-workshop-visual--strengths,.team-workshop-visual--voices,.team-workshop-visual--core) .team-workshop-card{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:flex-start;
  min-width:0;
  min-height:220px;
  height:auto;
  margin:0;
  padding:28px;
  border:0;
  background:transparent;
  overflow:visible;
  box-sizing:border-box;
  text-align:left;
}
.himart-team-page :is(.team-workshop-visual--people,.team-workshop-visual--strengths,.team-workshop-visual--voices,.team-workshop-visual--core) .team-workshop-card:first-child{padding-left:0}
.himart-team-page :is(.team-workshop-visual--people,.team-workshop-visual--strengths,.team-workshop-visual--voices,.team-workshop-visual--core) .team-workshop-card:last-child{padding-right:0}
.himart-team-page :is(.team-workshop-visual--people,.team-workshop-visual--strengths,.team-workshop-visual--voices,.team-workshop-visual--core) .team-workshop-card + .team-workshop-card{
  border-left:0;
}
.himart-team-page :is(.team-workshop-visual--people,.team-workshop-visual--strengths,.team-workshop-visual--voices,.team-workshop-visual--core) .team-workshop-card + .team-workshop-card::before{
  content:"";
  position:absolute;
  top:20%;
  left:0;
  width:1px;
  height:60%;
  background:var(--team-workshop-divider);
  pointer-events:none;
}
.himart-team-page .team-workshop-visual .team-workshop-card::after{display:none;content:none}
.himart-team-page .team-workshop-visual .team-workshop-card>span{
  display:block;
  flex:0 0 auto;
  width:100%;
  margin:0;
  padding:0;
  color:var(--hm-blue);
  font:400 12px/1 var(--hm-font-en);
  letter-spacing:var(--hm-track-note);
  text-align:left;
}
.himart-team-page :is(.team-workshop-visual--people,.team-workshop-visual--strengths,.team-workshop-visual--voices,.team-workshop-visual--core) .team-workshop-card__copy{
  display:block;
  width:100%;
  min-width:0;
  margin:var(--team-workshop-number-title-gap) 0 0;
  padding:0;
  text-align:left;
}
.himart-team-page .team-workshop-visual .team-workshop-card h4{margin:0;padding:0;max-width:none;color:#fff;font-family:var(--hm-font-ko);font-size:24px;font-weight:300;font-variation-settings:"wght" 300;line-height:1.28;letter-spacing:var(--hm-track-group);word-break:keep-all;text-align:left}
.himart-team-page .team-workshop-visual .team-workshop-card p{margin:10px 0 0;padding:0;max-width:38ch;color:rgba(255,255,255,.68);font-family:var(--hm-font-ko);font-size:16px;font-weight:300;font-variation-settings:"wght" 300;line-height:1.5;letter-spacing:var(--hm-track-body);word-break:keep-all;text-align:left}

/* 02.2 / 02.4: two equal columns. */
.himart-team-page :is(.team-workshop-visual--people,.team-workshop-visual--voices) .team-workshop-visual__cards{grid-template-columns:repeat(2,minmax(0,1fr))}

/* 02.3: three equal columns using the same divider contract. */
.himart-team-page .team-workshop-visual--strengths .team-workshop-visual__cards{grid-template-columns:repeat(3,minmax(0,1fr))}
.himart-team-page .team-strength-summary-v2{display:none}

/* 03.1: one full-width content cell, left aligned like the workshop cards. */
.himart-team-page .team-workshop-visual--core .team-workshop-visual__cards{grid-template-columns:1fr}
.himart-team-page .team-workshop-visual--core .team-workshop-card>span{color:rgba(255,255,255,.62);font-size:10px}
.himart-team-page .team-workshop-visual--core .team-workshop-card__copy{display:flex;flex-direction:column;align-items:flex-start;text-align:left}
.himart-team-page .team-workshop-visual--core .team-core-value__word-v2{display:block;margin:0;color:#fff;font-family:var(--hm-font-en);font-size:64px;font-weight:400;line-height:1;letter-spacing:-.03em;text-align:left;text-transform:uppercase}
.himart-team-page .team-workshop-visual--core .team-core-value__copy-v2{margin:8px 0 0;max-width:none;color:rgba(255,255,255,.78);font-family:var(--hm-font-ko);font-size:16px;font-weight:300;font-variation-settings:"wght" 300;line-height:1.5;letter-spacing:var(--hm-track-body);text-align:left;white-space:nowrap}
.himart-team-page .team-workshop-visual--core .team-core-value__copy-v2 br{display:none}

/* 03.2 — Way of Working: open editorial rows, not cards. ------------------- */
.himart-team-page .team-wow-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;counter-reset:wow}
.himart-team-page .team-wow{counter-increment:wow;min-height:0;padding:24px 0 28px;border:0;border-top:1px solid var(--hm-line-content-divider,var(--hm-line-weak));background:transparent}
.himart-team-page .team-wow:before{content:"0" counter(wow);display:block;font-family:var(--hm-font-en);font-size:12px;color:rgba(255,255,255,.4)}
.himart-team-page .team-wow h4{margin:32px 0 0;font-size:24px;line-height:1.42;letter-spacing:-.035em;font-weight:600}
.himart-team-page .team-wow p{margin:14px 0 0;max-width:680px;font-size:16px;line-height:1.7;color:rgba(255,255,255,.56)}
.himart-team-page .team-wow__highlight{display:inline;padding:0 .08em .03em;background:#D30202;color:#fff;box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* 04 — close --------------------------------------------------------------- */
.himart-team-page .team-final{padding:0 0 10px;border-top:0}
/* 04.2 closing statement deliberately shares the exact 01.2 statement scale and color. */
.himart-team-page .team-final__title{max-width:980px!important;margin:0!important;font-size:clamp(30px,3.2vw,54px)!important;line-height:1.24!important;letter-spacing:-.055em!important;font-weight:500!important;color:var(--hm-blue)!important}
.himart-team-page .team-final__title strong{font-weight:500!important;color:var(--hm-blue)!important}
.himart-team-page .team-final__copy{max-width:760px;margin:28px 0 0;font-size:16px;line-height:1.85;color:rgba(255,255,255,.58)}

@media(max-width:1199px){
  .himart-team-page .team-grid{grid-template-columns:1fr;gap:24px}
  .himart-team-page .team-agenda{grid-template-columns:repeat(2,minmax(0,1fr))}
  .himart-team-page .team-agenda:not(.team-agenda--four) article:last-child{grid-column:1/-1}
}

@media(max-width:767px){
  .himart-team-page .team-agenda{grid-template-columns:1fr;gap:20px}
  .himart-team-page .team-agenda article:last-child{grid-column:auto}
  .himart-team-page .team-agenda strong{min-height:0}
  .himart-team-page .team-wow-grid{grid-template-columns:1fr}
  .himart-team-page .team-card,.himart-team-page .team-wow{min-height:auto}

  .himart-team-page .team-workshop-visual{padding-bottom:0}
  .himart-team-page .team-workshop-visual__image{aspect-ratio:auto;padding-top:62.5%;margin-bottom:0;overflow:visible}
  .himart-team-page :is(.team-workshop-visual--people,.team-workshop-visual--strengths,.team-workshop-visual--voices,.team-workshop-visual--core) .team-workshop-visual__cards{position:relative;right:auto;bottom:auto;grid-template-columns:1fr;width:100%;aspect-ratio:auto;margin-top:24px;transform:none;background:transparent;overflow:visible}
  .himart-team-page .team-workshop-visual--strengths .team-workshop-visual__cards{grid-template-columns:1fr}
  .himart-team-page :is(.team-workshop-visual--people,.team-workshop-visual--strengths,.team-workshop-visual--voices,.team-workshop-visual--core) .team-workshop-card{min-height:0;height:auto;padding:24px 0 28px;border:0;overflow:visible}
  .himart-team-page :is(.team-workshop-visual--people,.team-workshop-visual--strengths,.team-workshop-visual--voices,.team-workshop-visual--core) .team-workshop-card + .team-workshop-card{border-left:0;border-top:0}
  .himart-team-page :is(.team-workshop-visual--people,.team-workshop-visual--strengths,.team-workshop-visual--voices,.team-workshop-visual--core) .team-workshop-card + .team-workshop-card::before{top:0;left:20%;width:60%;height:1px}
  .himart-team-page .team-workshop-visual--core .team-core-value__word-v2{font-size:48px}
  .himart-team-page .team-workshop-visual--core .team-core-value__copy-v2{white-space:normal}
}

/* Shared workshop modifier: full-width four-card strip placed 24px below media. */
.himart-team-page .team-workshop-visual--full-four{
  padding-bottom:0;
}
.himart-team-page .team-workshop-visual--full-four .team-workshop-visual__cards{
  position:relative;
  right:auto;
  bottom:auto;
  left:auto;
  display:grid;
  width:100%;
  height:auto;
  min-height:240px;
  aspect-ratio:auto;
  margin-top:24px;
  grid-template-columns:repeat(4,minmax(0,1fr));
  align-items:stretch;
  transform:none;
}
.himart-team-page .team-workshop-visual--full-four .team-workshop-card{
  min-height:240px;
  height:auto;
  justify-content:flex-start;
  padding:28px 20px;
}
.himart-team-page .team-workshop-visual--full-four .team-workshop-card:first-child{
  padding-left:0;
}
.himart-team-page .team-workshop-visual--full-four .team-workshop-card:last-child{
  padding-right:0;
}
.himart-team-page .team-workshop-visual--full-four .team-workshop-card + .team-workshop-card{
  border-left:1px solid rgba(255,255,255,.15);
}
.himart-team-page .team-workshop-visual--full-four .team-workshop-card>span{
  font-family:var(--hm-font-en);
  font-weight:100;
}
.himart-team-page .team-workshop-visual--full-four .team-workshop-card__copy{
  margin-top:40px;
}
.himart-team-page .team-workshop-visual--full-four .team-workshop-card__copy>strong{
  display:block;
  margin:0 0 10px;
  color:var(--hm-blue);
  font-family:var(--hm-font-en);
  font-size:44px;
  font-weight:100;
  line-height:1;
  letter-spacing:var(--hm-track-data-number);
}
.himart-team-page .team-workshop-visual--full-four .team-workshop-card h4{
  font-size:22px;
}
@media(max-width:1180px){
  .himart-team-page .team-workshop-visual--full-four .team-workshop-visual__cards{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media(max-width:780px){
  .himart-team-page .team-workshop-visual--full-four .team-workshop-visual__cards{
    grid-template-columns:1fr;
  }
  .himart-team-page .team-workshop-visual--full-four .team-workshop-card + .team-workshop-card{
    border-left:0;
  }
}

