/* ==================================================
   ABOUT PAGE
   ================================================== */

.about-page {
  position: relative;
  width: 100%;
  padding: 120px var(--gutter) 140px;
  font-family: var(--font-text);
}


/* --------------------------------------------------
   BIO
   -------------------------------------------------- */

.about-label {
  margin-bottom: 18px;
  font-size: var(--text-size);
  line-height: 1;
  color: var(--blue);
  font-weight: bold;
}

.about-cv > .about-label,
.about-filmography > .about-label {
  color: var(--blue);
  font-weight: bold;
}

.about-bio-text {
  max-width: 900px;
  font-size: clamp(15px, 1.35vw, 21px);
  line-height: 1.2;
}

.about-bio-text p {
  margin: 0 0 1em;
}

.about-bio-text p:last-child {
  margin-bottom: 0;
}

.about-bio-text a {
  text-decoration: none;
}

.about-bio-text a:hover {
  font-style: italic;
}


/* ==================================================
   MAIN LAYOUT
   left: bio + blocks
   right: portrait
   ================================================== */

.about-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(40px, 6vw, 90px);
  align-items: start;
}

.about-layout.has-portrait {
  grid-template-columns:
    minmax(0, 1.15fr)
    minmax(260px, 0.85fr);
}

.about-column {
  min-width: 0;
}


/* --------------------------------------------------
   PORTRAIT
   -------------------------------------------------- */

.about-portrait {
  position: static;
  align-self: start;
  justify-self: end;
  width: 95%;
  margin: 0;
}

.about-portrait picture,
.about-portrait img {
  display: block;
  width: 100%;
  height: auto;
}

.about-portrait.media-rounded img {
  border-radius: var(--radius);
}

.about-portrait .lightbox-link {
  display: block;
  cursor: zoom-in;
}


/* ==================================================
   ABOUT BLOCKS
   ================================================== */

.about-blocks {
  margin-top: clamp(50px, 7vw, 110px);
}

.media-block {
  margin-bottom: clamp(50px, 7vw, 100px);
}

.media-block:last-child {
  margin-bottom: 0;
}

.media-block .block-body {
  max-width: 760px;
  line-height: 1.3;
}

.media-block .block-body p {
  margin: 0 0 1em;
}

.media-block .block-body p:last-child {
  margin-bottom: 0;
}

.media-block .block-body a {
  text-decoration: none;
}

.media-block .block-body a:hover {
  font-style: italic;
}

.block-links span {
  margin: 0 0.25em;
}


/* block titles */

.about-blocks .media-title {
  font-family: var(--font-text);
  font-weight: bold;
  color: var(--blue);
}

.about-blocks .block-body {
  font-family: var(--font-text);
}


/* ==================================================
   CV / FILMOGRAPHY
   year · title · role · note
   ================================================== */

.block-cv {
  width: 100%;
  min-width: 0;
}

.block-cv .block-body {
  max-width: none;
}

.block-cv .cv-row {
  display: grid;

  grid-template-columns:
    120px
    minmax(300px, 1fr)
    160px
    max-content;

  column-gap: 40px;
  align-items: baseline;

  width: 100%;
  min-width: 0;

  padding-bottom: 16px;
  margin-bottom: 16px;

  border-bottom: 1px solid var(--rule);
}

.block-cv .cv-row:last-child {
  margin-bottom: 0;
  border-bottom: 0;
}

.block-cv .cv-year,
.block-cv .cv-title,
.block-cv .cv-role,
.block-cv .cv-note {
  min-width: 0;
}

.block-cv .cv-title {
  font-weight: bold;
  white-space: nowrap;
}

.block-cv .cv-role {
  white-space: nowrap;
}

.block-cv .cv-note {
  display: block;
  font-style: italic;
  white-space: nowrap;
}


/* ==================================================
   LEGACY ABOUT LISTS
   ================================================== */

.about-section {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  align-items: start;
  margin-bottom: clamp(90px, 11vw, 170px);
}

.about-list {
  font-size: var(--label-size);
  line-height: 1.25;
}

.about-list-row {
  display: grid;
  grid-template-columns:
    minmax(100px, 0.22fr)
    minmax(0, 1fr);

  gap: 30px;

  padding-bottom: 20px;
  margin-bottom: 20px;

  border-bottom: 1px solid var(--rule);
}

.about-list-row:last-child {
  margin-bottom: 0;
}

.about-list-main {
  min-width: 0;
}

.about-list-info p {
  margin: 0 0 0.4em;
}

.about-list-info p:last-child {
  margin-bottom: 0;
}

.about-film-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  row-gap: 3px;
}

.about-filmography .about-list-title {
  font-weight: bold;
}

.about-film-separator {
  flex: 0 0 auto;
  margin: 0 10px;
  font-size: 0.55em;
  line-height: 1;
}


/* ==================================================
   MEDIA
   ================================================== */

.about-media {
  margin-top: clamp(80px, 10vw, 150px);
}

.about-media .media-image,
.about-media .media-gallery,
.about-media .media-video,
.about-media .media-text {
  margin-bottom: clamp(70px, 9vw, 140px);
}

.about-media img {
  border-radius: var(--radius);
}


/* ==================================================
   CLOSING AREA
   image/gallery below bio + portrait
   ================================================== */

.about-closing {
  clear: both;
  margin-top: clamp(70px, 9vw, 140px);
}

.about-closing .media-image,
.about-closing .media-gallery {
  margin-bottom: clamp(50px, 7vw, 100px);
}

.about-closing .media-image:last-child,
.about-closing .media-gallery:last-child {
  margin-bottom: 0;
}


/* ==================================================
   NEWSLETTER FORM
   ================================================== */

.block-newsletter .connect-note {
  margin-top: 1.5em;
  font-size: clamp(12px, 0.9vw, 14px);
  line-height: 1.3;
}

.newsletter-form {
  margin: 0;
}

.form-row {
  display: flex;
  align-items: baseline;
  gap: 1em;

  max-width: 520px;

  padding-bottom: 6px;
  border-bottom: 1px solid var(--blue);
}

.form-row label {
  flex: 0 0 auto;
}

.form-row input {
  flex: 1 1 auto;
  min-width: 0;

  padding: 0;
  border: 0;

  background: transparent;

  font: inherit;
  color: var(--blue);
}

.form-row input:focus-visible {
  outline: none;
}

.form-row button {
  flex: 0 0 auto;

  padding: 0;
  border: 0;

  background: transparent;

  font: inherit;
  color: var(--blue);

  text-transform: uppercase;
}

.form-row button:hover {
  font-style: italic;
}

.form-message {
  margin: 0 0 1em;
}

.form-message--error {
  color: var(--blue);
  font-style: italic;
}

.form-message--success {
  font-style: italic;
}

.form-trap {
  position: absolute;
  left: -9999px;

  width: 1px;
  height: 1px;

  overflow: hidden;
}

/* ==================================================
   FLAT LAPTOP DISPLAYS
   CV wie Tablet
   ================================================== */

@media (min-width: 1101px) and (max-height: 850px) {

  .block-cv {
    width: 100%;
    min-width: 0;
    overflow: hidden;
  }

  .block-cv .block-body {
    width: 100%;
    max-width: none;
    min-width: 0;
  }

  .block-cv .cv-row {
    display: grid;

    grid-template-columns:
      60px
      minmax(0, 1.7fr)
      minmax(65px, 0.7fr)
      minmax(0, 1.3fr);

    column-gap: 16px;

    width: 100%;
    min-width: 0;

    align-items: baseline;

    padding-bottom: 16px;
    margin-bottom: 16px;
  }

  .block-cv .cv-year,
  .block-cv .cv-title,
  .block-cv .cv-role,
  .block-cv .cv-note {
    min-width: 0;
  }

  .block-cv .cv-title {
    font-weight: bold;
    white-space: normal;
  }

  .block-cv .cv-role {
    white-space: normal;
  }

  .block-cv .cv-note {
    font-style: italic;
    white-space: normal;
  }
}

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

@media (max-width: 1100px) {

  /* Main layout */

  .about-layout.has-portrait {
    grid-template-columns:
      minmax(0, 1.1fr)
      minmax(220px, 0.9fr);

    gap: 35px;
  }


  /* CV / FILMOGRAPHY */

  .block-cv {
    width: 100%;
    min-width: 0;
    overflow: hidden;
  }

  .block-cv .block-body {
    width: 100%;
    max-width: none;
    min-width: 0;
  }

  .block-cv .cv-row {
    display: grid;

    grid-template-columns:
      60px
      minmax(0, 1.7fr)
      minmax(65px, 0.7fr)
      minmax(0, 1.3fr);

    column-gap: 16px;

    width: 100%;
    min-width: 0;

    align-items: baseline;

    padding-bottom: 16px;
    margin-bottom: 16px;
  }

  .block-cv .cv-year,
  .block-cv .cv-title,
  .block-cv .cv-role,
  .block-cv .cv-note {
    min-width: 0;
  }

  .block-cv .cv-title {
    font-weight: bold;
    white-space: normal;
  }

  .block-cv .cv-role {
    white-space: normal;
  }

  .block-cv .cv-note {
    font-style: italic;
    white-space: normal;
  }


  /* Legacy sections */

  .about-section {
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 30px;
  }

  .about-list-row {
    grid-template-columns: 90px minmax(0, 1fr);
    gap: 24px;
  }
}


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

@media (max-width: 700px) {

  .about-page {
    padding: 95px 12px 120px;
  }


  /* --------------------------------------------------
     MAIN LAYOUT

     Reihenfolge:
     BIO
     PORTRAIT
     BLOCKS
     -------------------------------------------------- */

  .about-layout,
  .about-layout.has-portrait {
    display: flex;
    flex-direction: column;
    gap: 28px;
  }

  .about-column {
    display: contents;
  }

  .about-bio {
    order: 1;
  }

  .about-portrait {
    position: static;
    order: 2;

    width: 100%;

    align-self: auto;
    justify-self: auto;

    margin: 0;
  }

  .about-blocks {
    order: 3;
    margin-top: 32px;
  }


  /* --------------------------------------------------
     BIO
     -------------------------------------------------- */

  .about-bio-text {
    max-width: none;
    font-size: clamp(16px, 4.8vw, 21px);
  }


  /* --------------------------------------------------
     CV / FILMOGRAPHY
     -------------------------------------------------- */

  .block-cv {
    width: 100%;
    min-width: 0;
    overflow: hidden;
  }

  .block-cv .block-body {
    width: 100%;
    max-width: none;
    min-width: 0;
  }

  .block-cv .cv-row {
    display: grid;

    grid-template-columns:
      52px
      minmax(0, 1.7fr)
      minmax(55px, 0.7fr)
      minmax(0, 1.3fr);

    column-gap: 12px;

    width: 100%;
    min-width: 0;

    align-items: baseline;

    padding-bottom: 15px;
    margin-bottom: 15px;
  }

  .block-cv .cv-year,
  .block-cv .cv-title,
  .block-cv .cv-role,
  .block-cv .cv-note {
    min-width: 0;
  }

  .block-cv .cv-title {
    font-weight: bold;
    white-space: normal;
  }

  .block-cv .cv-role {
    white-space: normal;
  }

  .block-cv .cv-note {
    font-style: italic;
    white-space: normal;
  }


  /* --------------------------------------------------
     LEGACY LISTS
     -------------------------------------------------- */

  .about-section {
    display: block;
    margin-bottom: 80px;
  }

  .about-section > .about-label {
    margin-bottom: 25px;
  }

  .about-list {
    font-size: 15px;
  }

  .about-list-row {
    grid-template-columns: 70px minmax(0, 1fr);
    gap: 15px;

    padding-bottom: 15px;
    margin-bottom: 15px;
  }

  .about-film-separator {
    margin: 0 7px;
  }


  /* --------------------------------------------------
     MEDIA
     -------------------------------------------------- */

  .about-media {
    margin-top: 70px;
  }

  .about-media .media-image,
  .about-media .media-gallery,
  .about-media .media-video,
  .about-media .media-text {
    margin-bottom: 60px;
  }

  .about-closing {
    margin-top: 70px;
  }
}