/* =========================================================
   WOMB & HEART
   INTRO / NADJA
========================================================= */


/* =========================================================
   SECTION
========================================================= */

.intro-editorial {
  width: 100%;

  padding:
    clamp(48px, 5vw, 76px)
    0
    clamp(90px, 8vw, 130px);

  background:
    #ffffff;

  color:
    #512c3e;
}


/* =========================================================
   OUTER SHELL
========================================================= */

.intro-editorial-shell {
  position:
    relative;
}


/* =========================================================
   COMPLETE GRAY PANEL
========================================================= */

.intro-panel {
  position:
    relative;

  width:
    100%;

  overflow:
    hidden;

  padding:
    clamp(48px, 5vw, 70px)
    clamp(42px, 5vw, 72px)
    clamp(48px, 5vw, 70px)
    clamp(82px, 7vw, 105px);

  background:
    #fff6f7;

  border-radius:
    34px;
}

/* =========================================================
   MAIN TWO-COLUMN LAYOUT

   LEFT CONTENT AND RIGHT IMAGE SHARE ONE HEIGHT
========================================================= */

.intro-main {
  --intro-column-height:
    clamp(
      500px,
      40vw,
      570px
    );

  position:
    relative;

  z-index:
    3;

  display:
    grid;

  grid-template-columns:
    minmax(340px, 0.86fr)
    minmax(500px, 1.14fr);

  gap:
    clamp(
      58px,
      7vw,
      105px
    );

  align-items:
    stretch;
}


/* =========================================================
   LEFT COLUMN

   FOUR VERTICAL AREAS:

   1. top meta
   2. heading
   3. vertically centered body
   4. bottom CTA
========================================================= */

.intro-content {
  width:
    100%;

  height:
    var(--intro-column-height);

  max-width:
    530px;

  display:
    grid;

  grid-template-rows:
    auto
    auto
    1fr
    auto;

  align-items:
    start;
}


/* =========================================================
   TOP META

   SEIT 2020  ─────  WOMB & HEART

   ONLY ONE LINE.
========================================================= */

.intro-top-meta {
  width:
    100%;

  display:
    flex;

  align-items:
    center;

  gap:
    12px;

  color:
    #512c3e;

  font-size:
    9px;

  font-weight:
    700;

  line-height:
    1;

  letter-spacing:
    0.18em;

  white-space:
    nowrap;
}


.intro-top-separator {
  width:
    clamp(
      70px,
      7vw,
      105px
    );

  height:
    1px;

  flex:
    0
    0
    auto;

  background:
    #ee263e;
}


/* =========================================================
   HEADING GROUP
========================================================= */

.intro-heading-group {
  width:
    100%;

  margin-top:
    23px;
}


/* =========================================================
   HEADING

   SMALLER
   UPPERCASE
   ONE LINE DESKTOP
========================================================= */

.intro-content h2 {
  margin:
    0;

  width:
    100%;

  color:
    #512c3e;

  font-size:
    clamp(
      24px,
      2vw,
      30px
    );

  font-weight:
    700;

  line-height:
    1;

  letter-spacing:
    -0.015em;

  text-transform:
    uppercase;

  white-space:
    nowrap;
}


/* =========================================================
   1PX LINE CLOSE TO HEADING
========================================================= */

.intro-content-rule {
  display:
    block;

  width:
    72px;

  height:
    1px;

  margin-top:
    10px;

  background:
    #ee263e;
}


/* =========================================================
   BODY AREA

   The grid row itself fills the middle of the column.

   The actual paragraphs are vertically centred inside it.
========================================================= */

.intro-body {
  width:
    100%;

  max-width:
    500px;

  align-self:
    center;

  padding:
    22px
    0;
}


/* =========================================================
   PARAGRAPHS
========================================================= */

.intro-body p {
  width:
    100%;

  margin:
    0;

  color:
    #512c3e;

  font-size:
    18px;

  font-weight:
    400;

  line-height:
    1.48;

  letter-spacing:
    -0.01em;
}


.intro-body p + p {
  margin-top:
    17px;
}


/* =========================================================
   CTA

   Grid row 4 anchors it to bottom of column.
========================================================= */

.intro-read-more {
  width:
    fit-content;

  align-self:
    end;

  padding-bottom:
    4px;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    9px;

  border-bottom:
    1px
    solid
    currentColor;

  color:
    #512c3e;

  font-size:
    10px;

  font-weight:
    700;

  line-height:
    1;

  letter-spacing:
    0.13em;

  transition:
    opacity
    180ms
    ease;
}


.intro-read-more:hover {
  opacity:
    0.58;
}


.intro-read-more svg {
  width:
    16px;

  height:
    16px;

  flex:
    0
    0
    16px;

  fill:
    none;

  stroke:
    currentColor;

  stroke-width:
    1.8;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;

  transition:
    transform
    220ms
    ease;
}


.intro-read-more:hover svg {
  transform:
    translateX(
      3px
    );
}


/* =========================================================
   LEFT VERTICAL META

   FRAU
     │
   ZYKLUS
     │
   VERBINDUNG

   ONLY TWO LINES.
========================================================= */

.intro-vertical-meta {
  position:
    absolute;

  z-index:
    6;

  top:
    50%;

  left:
    24px;

  transform:
    translateY(-50%);

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  gap:
    13px;
}


/* =========================================================
   VERTICAL WORDS
========================================================= */

.intro-vertical-word {
  color:
    #512c3e;

  font-size:
    8px;

  font-weight:
    700;

  line-height:
    1;

  letter-spacing:
    0.18em;

  writing-mode:
    vertical-rl;

  text-orientation:
    mixed;
}


/* =========================================================
   ONLY TWO VERTICAL LINES
========================================================= */

.intro-vertical-separator {
  width:
    1px;

  height:
    40px;

  background:
    #ee263e;
}


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

   SAME HEIGHT AS LEFT COLUMN
========================================================= */

.intro-image-area {
  position:
    relative;

  width:
    100%;

  height:
    var(--intro-column-height);

  max-width:
    660px;

  justify-self:
    end;
}


/* =========================================================
   DECORATIVE DIAMOND
========================================================= */

.intro-image-diamond {
  position:
    absolute;

  z-index:
    0;

  top:
    50%;

  left:
    46%;

  width:
    68%;

  aspect-ratio:
    1 / 1;

  border:
    1px
    solid
    rgba(
      238, 38, 62,
      0.58
    );

  transform:
    translate(
      -50%,
      -50%
    )
    rotate(
      45deg
    );

  pointer-events:
    none;
}


/* =========================================================
   IMAGE FRAME
========================================================= */

.intro-image {
  position:
    relative;

  z-index:
    2;

  width:
    calc(
      100% -
      58px
    );

  height:
    100%;

  margin:
    0
    58px
    0
    0;

  overflow:
    hidden;

  border-radius:
    20px;

  background:
    #eab4c9;
}


/* =========================================================
   ACTUAL IMAGE

   NEVER STRETCHED
========================================================= */

.intro-image img {
  display:
    block;

  width:
    100%;

  height:
    100%;

  max-width:
    none;

  object-fit:
    cover;

  object-position:
    center
    42%;
}


/* =========================================================
   FOUR IMAGE PARTITIONS
========================================================= */

.intro-image-divider {
  position:
    absolute;

  z-index:
    4;

  top:
    0;

  bottom:
    0;

  width:
    8px;

  background:
    #fff6f7;

  transform:
    translateX(
      -50%
    );

  pointer-events:
    none;
}


.intro-image-divider--1 {
  left:
    25%;
}


.intro-image-divider--2 {
  left:
    50%;
}


.intro-image-divider--3 {
  left:
    75%;
}


/* =========================================================
   RIGHT INDEX
========================================================= */

.intro-image-index {
  position:
    absolute;

  z-index:
    5;

  top:
    22%;

  right:
    0;

  width:
    38px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;
}


.intro-image-index strong {
  color:
    #512c3e;

  font-size:
    22px;

  font-weight:
    600;

  line-height:
    1;
}


.intro-index-line {
  width:
    1px;

  height:
    70px;

  margin:
    16px
    0;

  background:
    #ee263e;
}


.intro-image-index small {
  display:
    block;

  margin-top:
    12px;

  color:
    #512c3e;

  font-size:
    8px;

  font-weight:
    700;

  line-height:
    1;
}


/* =========================================================
   CURVED DETAIL
========================================================= */

.intro-panel-curve {
  position:
    absolute;

  z-index:
    1;

  right:
    22px;

  bottom:
    22px;

  width:
    68px;

  height:
    68px;

  border-right:
    1px
    solid
    rgba(
      238, 38, 62,
      0.36
    );

  border-bottom:
    1px
    solid
    rgba(
      238, 38, 62,
      0.36
    );

  border-bottom-right-radius:
    30px;

  pointer-events:
    none;
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

  .intro-panel {
    padding:
      46px
      38px
      46px
      68px;

    border-radius:
      28px;
  }


  .intro-main {
    --intro-column-height:
      520px;

    grid-template-columns:
      minmax(290px, 0.9fr)
      minmax(380px, 1.1fr);

    gap:
      42px;
  }


  .intro-content h2 {
    font-size:
      clamp(
        22px,
        2.6vw,
        28px
      );
  }


  .intro-body p {
    font-size:
      17px;

    line-height:
      1.47;
  }


  .intro-top-separator {
    width:
      55px;
  }


  .intro-image-area {
    max-width:
      540px;
  }


  .intro-image {
    width:
      calc(
        100% -
        46px
      );

    margin-right:
      46px;
  }


  .intro-image-index {
    width:
      30px;
  }


  .intro-vertical-meta {
    left:
      20px;
  }

}


/* =========================================================
   STACKED TABLET
========================================================= */

@media (max-width: 820px) {

  .intro-editorial {
    padding:
      44px
      0
      80px;
  }


  .intro-panel {
    padding:
      38px
      27px
      42px
      54px;

    border-radius:
      26px;
  }


  .intro-main {
    --intro-column-height:
      auto;

    grid-template-columns:
      1fr;

    gap:
      48px;
  }


  /* =====================================================
     LEFT
  ====================================================== */

  .intro-content {
    height:
      auto;

    max-width:
      600px;

    display:
      block;
  }


  .intro-top-meta {
    margin-bottom:
      20px;

    gap:
      10px;

    font-size:
      8px;
  }


  .intro-top-separator {
    width:
      55px;
  }


  .intro-heading-group {
    margin-top:
      0;
  }


  .intro-content h2 {
    font-size:
      clamp(
        24px,
        5vw,
        30px
      );

    white-space:
      normal;
  }


  .intro-content-rule {
    margin-top:
      9px;
  }


  .intro-body {
    padding:
      34px
      0
      0;

    max-width:
      580px;
  }


  .intro-body p {
    font-size:
      18px;
  }


  .intro-read-more {
    margin-top:
      28px;
  }


  /* =====================================================
     VERTICAL META
  ====================================================== */

  .intro-vertical-meta {
    left:
      15px;

    gap:
      10px;
  }


  .intro-vertical-separator {
    height:
      30px;
  }


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

  .intro-image-area {
    width:
      100%;

    height:
      auto;

    max-width:
      none;
  }


  .intro-image {
    width:
      calc(
        100% -
        40px
      );

    height:
      auto;

    margin-right:
      40px;

    aspect-ratio:
      1.08 / 0.82;
  }


  .intro-image-index {
    width:
      26px;
  }


  .intro-index-line {
    height:
      50px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 560px) {

  .intro-editorial {
    padding:
      34px
      0
      68px;
  }


  .intro-panel {
    padding:
      30px
      16px
      34px
      39px;

    border-radius:
      22px;
  }


  /* =====================================================
     TOP META
  ====================================================== */

  .intro-top-meta {
    margin-bottom:
      18px;

    gap:
      7px;

    font-size:
      7px;

    letter-spacing:
      0.13em;
  }


  .intro-top-separator {
    width:
      35px;
  }


  /* =====================================================
     HEADING
  ====================================================== */

  .intro-content h2 {
    font-size:
      clamp(
        21px,
        6vw,
        26px
      );

    line-height:
      1.05;

    white-space:
      normal;
  }


  .intro-content-rule {
    width:
      55px;

    height:
      1px;

    margin-top:
      8px;
  }


  /* =====================================================
     BODY
  ====================================================== */

  .intro-body {
    padding-top:
      29px;
  }


  .intro-body p {
    font-size:
      17px;

    line-height:
      1.5;
  }


  .intro-body p + p {
    margin-top:
      16px;
  }


  /* =====================================================
     VERTICAL TEXT
  ====================================================== */

  .intro-vertical-meta {
    left:
      10px;

    gap:
      8px;
  }


  .intro-vertical-word {
    font-size:
      6px;

    letter-spacing:
      0.15em;
  }


  .intro-vertical-separator {
    height:
      23px;
  }


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

  .intro-main {
    gap:
      38px;
  }


  .intro-image {
    width:
      calc(
        100% -
        31px
      );

    margin-right:
      31px;

    aspect-ratio:
      0.96 / 1;
  }


  .intro-image-divider {
    width:
      5px;
  }


  /* =====================================================
     INDEX
  ====================================================== */

  .intro-image-index {
    width:
      21px;

    top:
      18%;
  }


  .intro-image-index strong {
    font-size:
      15px;
  }


  .intro-index-line {
    height:
      39px;

    margin:
      10px
      0;
  }


  .intro-image-index small {
    margin-top:
      8px;

    font-size:
      7px;
  }


  /* =====================================================
     CURVE
  ====================================================== */

  .intro-panel-curve {
    right:
      13px;

    bottom:
      13px;

    width:
      44px;

    height:
      44px;

    border-bottom-right-radius:
      20px;
  }

}
/* Align the intro panel with the hero's 10px side margins. */
.intro-editorial .intro-editorial-shell {
  width: calc(100% - 20px);
}

/* Let both desktop columns and the photograph grow with the wider panel. */
@media (min-width: 1001px) {
  .intro-editorial .intro-main {
    --intro-column-height: clamp(500px, 40vw, 570px);
  }

  .intro-editorial .intro-panel {
    padding-top: 68px;
    padding-bottom: 54px;
    padding-inline: clamp(42px, 5vw, 72px);
  }

  .intro-editorial .intro-content {
    grid-template-rows: auto auto auto auto;
    align-content: start;
    row-gap: 0;
  }

  .intro-editorial .intro-heading-group {
    margin-top: 0;
  }

  .intro-editorial .intro-body {
    align-self: start;
    padding-block: 22px;
  }

  .intro-editorial .intro-body p + p {
    margin-top: 22px;
  }

  .intro-editorial .intro-read-more {
    align-self: start;
  }

  .intro-editorial .intro-content,
  .intro-editorial .intro-image-area,
  .intro-editorial .intro-body {
    max-width: none;
  }

  .intro-editorial .intro-main {
    width: 100%;
    margin-left: 0;
    min-height: var(--intro-column-height);
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
    column-gap: clamp(42px, 5vw, 72px);
    align-items: start;
    align-content: center;
  }

  .intro-editorial .intro-image-area {
    height: calc(var(--intro-column-height) * 0.7);
    max-width: none;
    left: 0;
    padding-right: 32px;
  }

  .intro-editorial .intro-image {
    width: 100%;
    height: 100%;
    margin: 0;
  }

  .intro-editorial .intro-content {
    position: relative;
    left: 0;
    height: auto;
    padding-left: 0;
  }
}

@media (min-width: 1001px) and (max-width: 1100px) {
  .intro-editorial .intro-panel {
    padding-top: 44px;
    padding-bottom: 42px;
    padding-inline: 38px;
  }

  .intro-editorial .intro-main {
    --intro-column-height: 520px;
    column-gap: 42px;
  }

  .intro-editorial .intro-image-area {
    padding-right: 32px;
  }

  .intro-editorial .intro-content {
    padding-left: 0;
  }
}