/* =========================================
   HOW TO MEASURE
   SHARED MALE + FEMALE PAGE
========================================= */

.measure-page {
  min-height: 100vh;
}

/* =========================================
   TOP BAR
========================================= */

.measure-topbar {
  display: flex;

  justify-content: space-between;
  align-items: center;

  gap: 20px;
}

.measure-back {
  display: inline-flex;

  align-items: center;

  gap: 8px;

  padding:
    11px
    15px;

  border-radius: 12px;

  border:
    1px
    solid
    var(--border);

  background:
    rgba(
      7,
      9,
      14,
      0.40
    );

  backdrop-filter:
    blur(10px);

  -webkit-backdrop-filter:
    blur(10px);

  color:
    #d9dce2;

  font-size: 12px;

  font-weight: 900;

  letter-spacing: 0.10em;

  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease;
}

.measure-back:hover {
  transform:
    translateX(-3px);

  border-color:
    var(--accent-border);

  background:
    var(--accent-soft);
}

/* =========================================
   HERO
========================================= */

.measure-hero {
  max-width: 760px;

  margin: 0 auto;

  padding:
    68px
    20px
    52px;

  text-align: center;
}

.measure-eyebrow {
  color:
    var(--accent);

  font-size: 11px;

  font-weight: 950;

  letter-spacing: 0.22em;
}

.measure-hero h1 {
  margin:
    12px
    0
    0;

  font-size:
    clamp(
      44px,
      7vw,
      76px
    );

  line-height: 0.98;

  letter-spacing:
    -0.045em;
}

.measure-hero p {
  max-width: 590px;

  margin:
    18px
    auto
    0;

  color:
    #b9bbc3;

  font-size: 16px;

  line-height: 1.7;
}

/* =========================================
   MAIN STACK
========================================= */

.measure-stack {
  width:
    min(
      980px,
      100%
    );

  margin: 0 auto;

  display: grid;

  gap: 28px;
}

/* =========================================
   STANDARD MEASURE CARD
========================================= */

.measure-card {
  position: relative;

  overflow: hidden;

  display: grid;

  grid-template-columns:
    0.9fr
    1.1fr;

  min-height: 520px;

  border:
    1px
    solid
    var(--border);

  border-radius: 28px;

  background:
    rgba(
      5,
      10,
      17,
      0.47
    );

  backdrop-filter:
    blur(11px);

  -webkit-backdrop-filter:
    blur(11px);

  box-shadow:
    0
    22px
    70px
    rgba(
      0,
      0,
      0,
      0.28
    );
}

.measure-card.reverse {
  grid-template-columns:
    1.05fr
    0.95fr;
}

.measure-card::before {
  content: "";

  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--accent),
      transparent
    );

  opacity: 0.7;
}

/* =========================================
   IMAGE AREA
========================================= */

.measure-image {
  min-height: 100%;

  position: relative;

  overflow: hidden;

  background:
    rgba(
      3,
      6,
      11,
      0.60
    );
}

.measure-image img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  object-position: center;

  transition:
    transform 0.4s ease;
}

.measure-card:hover
.measure-image img {
  transform:
    scale(1.015);
}

/* =========================================
   CONTENT
========================================= */

.measure-content {
  display: flex;

  flex-direction: column;

  justify-content: center;

  padding:
    42px
    44px;
}

.measure-number {
  color:
    var(--accent);

  font-size: 11px;

  font-weight: 950;

  letter-spacing: 0.20em;
}

.measure-content h2 {
  margin:
    9px
    0
    10px;

  font-size:
    clamp(
      28px,
      4vw,
      40px
    );

  line-height: 1.08;

  letter-spacing:
    -0.03em;
}

.measure-subtitle {
  margin:
    0
    0
    24px;

  color:
    #aeb1ba;

  font-size: 14px;

  line-height: 1.6;
}

/* =========================================
   STEPS
========================================= */

.measure-steps {
  display: grid;

  gap: 13px;

  margin: 0;

  padding: 0;

  list-style: none;
}

.measure-steps li {
  display: grid;

  grid-template-columns:
    28px
    1fr;

  gap: 11px;

  align-items: start;

  color:
    #d5d6db;

  font-size: 15px;

  line-height: 1.55;
}

.step-number {
  width: 28px;
  height: 28px;

  display: grid;

  place-items: center;

  border-radius: 50%;

  background:
    var(--accent-soft);

  border:
    1px
    solid
    var(--accent-border);

  color:
    var(--accent);

  font-size: 11px;

  font-weight: 950;
}

/* =========================================
   TIP
========================================= */

.measure-tip {
  margin-top: 24px;

  padding:
    15px
    17px;

  border-radius: 14px;

  border-left:
    3px
    solid
    var(--accent);

  background:
    var(--accent-soft);

  color:
    #e5e6ea;

  font-size: 13.5px;

  line-height: 1.65;
}

/* =========================================
   CORRECT / WRONG
========================================= */

.measure-compare {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(
        0,
        1fr
      )
    );

  gap: 16px;
}

.compare-card {
  padding: 22px;

  border-radius: 20px;

  border:
    1px
    solid
    var(--border);

  background:
    rgba(
      5,
      8,
      13,
      0.58
    );

  backdrop-filter:
    blur(9px);

  -webkit-backdrop-filter:
    blur(9px);
}

.compare-title {
  margin-bottom: 13px;

  font-size: 12px;

  font-weight: 950;

  letter-spacing: 0.14em;
}

.compare-card.correct
.compare-title {
  color:
    #79d6aa;
}

.compare-card.wrong
.compare-title {
  color:
    #ff8b9a;
}

.compare-card p {
  margin: 0;

  color:
    #c7c9d0;

  font-size: 14px;

  line-height: 1.65;
}

/* =========================================
   FULL IMAGE CARD
   WAIST + HIP CIRCUMFERENCE
========================================= */

.visual-measure-card {
  position: relative;

  overflow: hidden;

  border:
    1px
    solid
    var(--border);

  border-radius: 28px;

  background:
    rgba(
      10,
      5,
      11,
      0.48
    );

  backdrop-filter:
    blur(11px);

  -webkit-backdrop-filter:
    blur(11px);

  box-shadow:
    0
    22px
    70px
    rgba(
      0,
      0,
      0,
      0.27
    );
}

.visual-measure-card::before {
  content: "";

  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--accent),
      transparent
    );

  opacity: 0.72;

  z-index: 2;
}

.visual-measure-header {
  padding:
    28px
    32px
    23px;
}

.visual-measure-header h2 {
  margin:
    8px
    0
    0;

  font-size:
    clamp(
      28px,
      4vw,
      39px
    );

  line-height: 1.1;

  letter-spacing:
    -0.03em;
}

.visual-measure-header p {
  max-width: 690px;

  margin:
    11px
    0
    0;

  color:
    #aeb1ba;

  font-size: 14px;

  line-height: 1.65;
}

.visual-main-image {
  overflow: hidden;

  border-top:
    1px
    solid
    rgba(
      255,
      255,
      255,
      0.08
    );

  background:
    rgba(
      3,
      4,
      8,
      0.7
    );
}

.visual-main-image img {
  width: 100%;

  display: block;

  height: auto;
}

/* =========================================
   WHR INFO
========================================= */

.whr-info {
  padding:
    25px
    30px;

  border-radius: 22px;

  border:
    1px
    solid
    rgba(
      240,
      90,
      184,
      0.24
    );

  background:
    rgba(
      30,
      7,
      24,
      0.52
    );

  backdrop-filter:
    blur(10px);

  -webkit-backdrop-filter:
    blur(10px);

  text-align: center;
}

.whr-label {
  color:
    var(--muted);

  font-size: 11px;

  font-weight: 900;

  letter-spacing: 0.16em;
}

.whr-formula {
  margin-top: 9px;

  color:
    white;

  font-size:
    clamp(
      24px,
      4vw,
      34px
    );

  font-weight: 950;
}

.whr-info p {
  max-width: 650px;

  margin:
    11px
    auto
    0;

  color:
    #bfc1c8;

  font-size: 13.5px;

  line-height: 1.6;
}

/* =========================================
   HIP DIP SECTION
========================================= */

.hip-reference-card {
  position: relative;

  overflow: hidden;

  padding-bottom: 30px;

  border:
    1px
    solid
    var(--border);

  border-radius: 28px;

  background:
    rgba(
      15,
      5,
      13,
      0.49
    );

  backdrop-filter:
    blur(11px);

  -webkit-backdrop-filter:
    blur(11px);

  box-shadow:
    0
    22px
    70px
    rgba(
      0,
      0,
      0,
      0.27
    );
}

.hip-reference-card::before {
  content: "";

  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--accent),
      transparent
    );

  opacity: 0.75;

  z-index: 2;
}

.hip-reference-header {
  padding:
    30px
    32px
    22px;
}

.hip-reference-header h2 {
  margin:
    8px
    0
    0;

  font-size:
    clamp(
      30px,
      4vw,
      42px
    );

  letter-spacing:
    -0.03em;
}

.hip-reference-main {
  overflow: hidden;

  border-top:
    1px
    solid
    rgba(
      255,
      255,
      255,
      0.08
    );

  border-bottom:
    1px
    solid
    rgba(
      255,
      255,
      255,
      0.08
    );

  background:
    rgba(
      4,
      3,
      7,
      0.7
    );
}

.hip-reference-main img {
  width: 100%;

  height: auto;

  display: block;
}

.hip-reference-copy {
  padding:
    28px
    32px
    4px;
}

.hip-reference-copy p {
  margin:
    0
    0
    14px;

  color:
    #d0d1d6;

  font-size: 15px;

  line-height: 1.72;
}

.hip-reference-copy strong {
  color:
    white;
}

/* =========================================
   HIP DIP LEVELS
========================================= */

.hip-level-title {
  margin-top: 27px;

  padding:
    0
    32px;

  color:
    var(--muted);

  font-size: 11px;

  font-weight: 900;

  letter-spacing: 0.15em;
}

.hip-level-grid {
  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(
        0,
        1fr
      )
    );

  gap: 14px;

  padding:
    15px
    32px
    0;
}

.hip-level-card {
  overflow: hidden;

  border:
    1px
    solid
    var(--border);

  border-radius: 18px;

  background:
    rgba(
      6,
      4,
      8,
      0.68
    );

  text-align: center;

  transition:
    transform 0.2s ease,
    border-color 0.2s ease;
}

.hip-level-card:hover {
  transform:
    translateY(-3px);

  border-color:
    var(--accent-border);
}

.hip-level-image {
  height: 270px;

  overflow: hidden;

  background: #0d0a10;
}

.hip-level-image img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
  object-position: center bottom;
}

.hip-level-card h3 {
  margin:
    14px
    10px
    4px;

  font-size: 16px;
}

.hip-level-card p {
  margin:
    0
    13px
    16px;

  color:
    var(--muted);

  font-size: 12.5px;

  line-height: 1.55;
}

/* =========================================
   BEFORE CALCULATE
========================================= */

.before-card {
  margin-top: 2px;

  padding:
    30px
    34px;

  border-radius: 24px;

  border:
    1px
    solid
    var(--accent-border);

  background:
    rgba(
      10,
      8,
      16,
      0.54
    );

  backdrop-filter:
    blur(10px);

  -webkit-backdrop-filter:
    blur(10px);

  box-shadow:
    inset
    0
    0
    28px
    var(--accent-soft);
}

.before-card h3 {
  margin:
    0
    0
    18px;

  color:
    #f2f2f4;

  font-size: 14px;

  letter-spacing: 0.14em;
}

.before-grid {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(
        0,
        1fr
      )
    );

  gap:
    12px
    24px;
}

.before-item {
  color:
    #c8cad0;

  font-size: 14px;

  line-height: 1.55;
}

.before-item::before {
  content: "•";

  margin-right: 9px;

  color:
    var(--accent);
}

.measure-example {
  margin-top: 19px;

  padding-top: 17px;

  border-top:
    1px
    solid
    rgba(
      255,
      255,
      255,
      0.08
    );

  color:
    #aeb1ba;

  font-size: 13px;
}

.measure-example strong {
  color:
    white;
}

/* =========================================
   BOTTOM BACK
========================================= */

.measure-bottom {
  display: flex;

  justify-content: center;

  padding:
    42px
    0
    8px;
}

/* =========================================
   WOMAN OVERRIDES
========================================= */

.woman-page .measure-card,
.woman-page .visual-measure-card,
.woman-page .hip-reference-card {
  background:
    rgba(
      19,
      6,
      16,
      0.46
    );
}

.woman-page .before-card {
  background:
    rgba(
      33,
      7,
      26,
      0.50
    );
}

/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 820px) {

  .measure-card,
  .measure-card.reverse {
    grid-template-columns:
      1fr;
  }

  .measure-card.reverse
  .measure-image {
    order: 0;
  }

  .measure-card.reverse
  .measure-content {
    order: 1;
  }

  .measure-image {
    min-height: 480px;
  }

  .measure-content {
    padding:
      32px
      28px;
  }

  .hip-level-grid {
    grid-template-columns:
      1fr;
  }

  .hip-level-image {
    height: 430px;
  }

}

@media (max-width: 640px) {

  .measure-compare {
    grid-template-columns:
      1fr;
  }

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

  .visual-measure-header,
  .hip-reference-header,
  .hip-reference-copy {
    padding-left: 22px;
    padding-right: 22px;
  }

  .hip-level-title {
    padding-left: 22px;
    padding-right: 22px;
  }

  .hip-level-grid {
    padding-left: 22px;
    padding-right: 22px;
  }

}

@media (max-width: 500px) {

  .measure-hero {
    padding:
      52px
      12px
      38px;
  }

  .measure-image {
    min-height: 390px;
  }

  .measure-content {
    padding:
      27px
      21px;
  }

  .measure-back {
    font-size: 10px;

    padding:
      10px
      11px;
  }

  .hip-level-image {
    height: 340px;
  }

}