/* =========================================================
  Drivers (CPT) styles
  Applies only to:
  - body.post-type-archive-driver  (/drivers/)
  - body.single-driver            (/drivers/{slug}/)
========================================================= */

/* ---------- Variables (scoped) ---------- */


/* ---------- Background layer ---------- */


/* Bring content above background */


/* =========================================================
  Base layout
========================================================= */
body.post-type-archive-driver .hkdp,
body.single-driver .hkdp{
  max-width:1040px;
  margin:0 auto;
  padding:28px 18px 64px;
  color:var(--hk-text);
}

body.post-type-archive-driver .hkdp a,
body.single-driver .hkdp a{
  color:var(--hk-link);
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.22);
}
body.post-type-archive-driver .hkdp a:hover,
body.single-driver .hkdp a:hover{
  color:var(--hk-linkHover);
  border-bottom-color:rgba(255,255,255,.45);
}

body.post-type-archive-driver .hkdp .hkdp-muted,
body.single-driver .hkdp .hkdp-muted{
  color:var(--hk-muted);
}

body.post-type-archive-driver .hkdp .hkdp-card,
body.single-driver .hkdp .hkdp-card{
  background:rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--hk-radius);
  backdrop-filter: blur(6px);
  padding:16px;
}

/* Headings */
body.post-type-archive-driver .hkdp h1,
body.post-type-archive-driver .hkdp h2,
body.single-driver .hkdp h1,
body.single-driver .hkdp h2{
  color:rgba(255,255,255,.96);
  letter-spacing:.04em;
  line-height:1.2;
  margin:0 0 12px;
}
body.post-type-archive-driver .hkdp h1,
body.single-driver .hkdp h1{
  font-size: clamp(28px, 4.2vw, 44px);
  margin-bottom:14px;
}
body.post-type-archive-driver .hkdp h2,
body.single-driver .hkdp h2{
  font-size: clamp(20px, 2.6vw, 28px);
  margin:26px 0 12px;
}

/* =========================================================
  Section spacing (Drivers archive/single)
  Stable version (structure-independent)
========================================================= */
body.post-type-archive-driver .hkdp-section,
body.single-driver .hkdp-section{
  margin: 0 0 80px;
}

@media (max-width:768px){
  body.post-type-archive-driver .hkdp-section,
  body.single-driver .hkdp-section{
    margin-bottom: 56px;
  }
}

/* remove margin from last section */
body.post-type-archive-driver .hkdp-section:last-child,
body.single-driver .hkdp-section:last-child{
  margin-bottom: 0;
}

/* =========================================================
  Map
========================================================= */
body.post-type-archive-driver .drivers-map img,
body.single-driver .drivers-map img{
  width:100%;
  height:auto;
  display:block;
  border-radius:var(--hk-radius);
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
}

/* =========================================================
  Grid
========================================================= */
body.post-type-archive-driver .drivers-grid,
body.single-driver .drivers-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 20px;   /* 横の間隔 */
  row-gap: 40px;      /* ← 縦の間隔（ここが重要） */
  margin-top: 20px;
}
@media (max-width:768px){
  body.post-type-archive-driver .drivers-grid,
  body.single-driver .drivers-grid{
    grid-template-columns:1fr;
  }
}

/* =========================================================
  Driver card
========================================================= */
body.post-type-archive-driver .driver-card,
body.single-driver .driver-card{
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--hk-radius);
  overflow:hidden;
  background:rgba(255,255,255,.04);
}

/* Card link */
body.post-type-archive-driver a.driver-card__link,
body.single-driver a.driver-card__link{
  display:block;
  border-bottom:0 !important;
  text-decoration:none !important;
  color:rgba(255,255,255,.92) !important;
}

/* Photo area (2:3) */
body.post-type-archive-driver .driver-card__photo,
body.single-driver .driver-card__photo{
  aspect-ratio: 2 / 3;
  background:rgba(0,0,0,.35);
  position:relative;
  overflow:hidden;
}

/* Image: always visible */
body.post-type-archive-driver .driver-card__photo img,
body.single-driver .driver-card__photo img{
  width:100% !important;
  height:100% !important;
  object-fit:cover;
  display:block !important;
  opacity:1 !important;
  visibility:visible !important;
  filter:none !important;
  transform:none !important;
}

/* Text area */
body.post-type-archive-driver .driver-card__body,
body.single-driver .driver-card__body{
  padding:12px 12px 10px;
}
body.post-type-archive-driver .driver-card__name,
body.single-driver .driver-card__name{
  font-size:15px;
  letter-spacing:.06em;
}
body.post-type-archive-driver .driver-card__region,
body.single-driver .driver-card__region{
  margin-top:6px;
  font-size:12px;
  letter-spacing:.08em;
  opacity:.80;
}

/* SNS row */
body.post-type-archive-driver .driver-card__sns,
body.single-driver .driver-card__sns{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  padding:10px 12px 12px;
  border-top:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.18);
}
body.post-type-archive-driver a.driver-sns,
body.single-driver a.driver-sns{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 10px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border-bottom:0 !important;
  font-size:12px;
  letter-spacing:.06em;
  opacity:.92;
}
body.post-type-archive-driver a.driver-sns:hover,
body.single-driver a.driver-sns:hover{
  opacity:1;
  background:rgba(255,255,255,.10);
}

/* =========================================================
  Team Activity (match reference layout)
========================================================= */

/* hard hide */
body.post-type-archive-driver .hk-ta-row[hidden]{
  display:none !important;
}

body.post-type-archive-driver .hk-ta-row{
  display:grid;
  grid-template-columns: 120px minmax(0,1fr) 240px 200px 120px;
  gap: 14px;
  align-items: center;

  padding: 14px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  background: rgba(255,255,255,.04);
}

@media (max-width: 860px){
  body.post-type-archive-driver .hk-ta-row{
    grid-template-columns: 110px minmax(0,1fr) 220px 180px 110px;
  }
}

/* Mobile: 基本同じ思想。ただ狭いので2段構成に落とす */
@media (max-width: 640px){
  body.post-type-archive-driver .hk-ta-row{
    grid-template-columns: 110px 1fr;
    grid-auto-rows: auto;
    align-items: start;
  }

  /* chassis/result/sns を横一列に並べる */
  body.post-type-archive-driver .hk-ta-box--chassis{ grid-column: 1 / -1; }
  body.post-type-archive-driver .hk-ta-box--result{ grid-column: 1 / -1; }
  body.post-type-archive-driver .hk-ta-sns{ grid-column: 1 / -1; justify-content: flex-start; }
}

/* Driver cell */
body.post-type-archive-driver .hk-ta-driver{
  display:grid;
  gap: 10px;
  justify-items: start;
}

body.post-type-archive-driver .hk-ta-driver__avatar{
  width: 96px;
  height: 96px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(0,0,0,.22);
}

body.post-type-archive-driver .hk-ta-driver__avatar img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}

body.post-type-archive-driver .hk-ta-driver__name{
  font-size: 14px;
  letter-spacing: .08em;
  opacity: .92;
  text-decoration:none;
  border-bottom: 0 !important;
}

/* Meta cell */
body.post-type-archive-driver .hk-ta-meta{
  min-width:0;
  display:grid;
  gap: 10px;
}

body.post-type-archive-driver .hk-ta-meta__date{
  font-size: 13px;
  letter-spacing: .10em;
  opacity: .90;
}

body.post-type-archive-driver .hk-ta-meta__title{
  font-size: 18px;
  letter-spacing: .06em;
  line-height: 1.25;
}

body.post-type-archive-driver .hk-ta-meta__title a{
  text-decoration:none;
  border-bottom: 0 !important;
}

body.post-type-archive-driver .hk-ta-meta__venue{
  font-size: 14px;
  letter-spacing: .06em;
  opacity: .78;
}

/* Chassis / Result boxes */
body.post-type-archive-driver .hk-ta-box{
  border: 2px solid rgba(255,255,255,.14);
  border-radius: 18px;
  background: rgba(0,0,0,.20);
  padding: 14px 16px;

  display:grid;
  gap: 10px;
  align-content: start;
  min-width:0;
}

body.post-type-archive-driver .hk-ta-box__k{
  font-size: 14px;
  letter-spacing: .10em;
  opacity: .85;
}

body.post-type-archive-driver .hk-ta-box__v{
  font-size: clamp(20px, 2.6vw, 42px);
  letter-spacing: .04em;
  line-height: 1.05;

  white-space: nowrap;      /* 画像の「大きく見せる」優先 */
  overflow: hidden;
  text-overflow: ellipsis;
}

/* SNS button */
body.post-type-archive-driver .hk-ta-sns{
  display:flex;
  justify-content: flex-end;
}

body.post-type-archive-driver .hk-ta-sns__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  width: 100%;
  min-width: 96px;
  padding: 14px 12px;

  border: 2px solid rgba(255,255,255,.14);
  border-radius: 18px;
  background: rgba(255,255,255,.04);

  font-size: clamp(18px, 2.6vw, 44px);
  letter-spacing: .06em;
  font-weight: 700;

  text-decoration:none !important;
  border-bottom:0 !important;
  color: rgba(255,255,255,.92);
  opacity: .92;
}

body.post-type-archive-driver .hk-ta-sns__btn:hover{
  opacity: 1;
  background: rgba(255,255,255,.08);
}

body.post-type-archive-driver .hk-ta-sns__btn.is-disabled{
  opacity: .35;
  cursor: default;
}

/* More button (restore) */
body.post-type-archive-driver .hk-ta-more{
  margin-top:14px;
  display:flex;
  justify-content:center;
}

body.post-type-archive-driver .hk-ta-more__btn{
  appearance:none;
  border:2px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  border-radius: 14px;
  padding: 12px 18px;
  font-size: 13px;
  letter-spacing: .08em;
  cursor:pointer;
  opacity:.92;
}

body.post-type-archive-driver .hk-ta-more__btn:hover{
  opacity:1;
  background: rgba(255,255,255,.10);
}

body.post-type-archive-driver .hk-ta-list{
  display: grid;
  gap: 12px;
}