/* ABOUT.CSS — About Page
   Luis Praxmarer Portfolio 2026 */

/* ─── Page Reset ─────────────────────────────────────────── */

body.page-about {
  overflow-y: auto;
  overflow-x: hidden;
  cursor: auto;
  background: var(--color-black);
}

/* ─── Nav Override: solid black ──────────────────────────── */

body.page-about .nav {
  background: var(--color-black);
  pointer-events: all;
}

body.page-about .nav__logo,
body.page-about .nav__link {
  mix-blend-mode: normal;
  color: var(--color-white);
}

body.page-about .nav__link::after {
  background: var(--color-white);
}

/* ─── Page Layout ────────────────────────────────────────── */

.about-page {
  padding-top: calc(var(--nav-height) + var(--space-xl));
  padding-left: var(--grid-margin);
  padding-right: var(--grid-margin);
  padding-bottom: var(--space-xl);
}

/* ─── Page Title ─────────────────────────────────────────── */

.about-title {
  font-family: var(--font-primary);
  font-size: var(--text-h1-size);
  font-weight: var(--text-h1-weight);
  line-height: var(--text-h1-line-height);
  letter-spacing: var(--text-h1-letter-spacing);
  font-variation-settings: var(--font-opsz);
  color: var(--color-white);
  margin-bottom: var(--space-normal);
}

/* ─── Two-column Layout ──────────────────────────────────── */

.about-layout {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: 128px;
  align-items: start;
}

/* ─── Left: Photo ────────────────────────────────────────── */

.about-photo {
  position: relative;
  width: 100%;
  line-height: 0;
}

.about-photo__img {
  width: 100%;
  height: auto;
  display: block;
}

.about-photo__img--second {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-photo:hover .about-photo__img--main {
  visibility: hidden;
}

.about-photo:hover .about-photo__img--second {
  display: block;
}

/* ─── Right: Bio + Accordions ────────────────────────────── */

.about-right {
  display: flex;
  flex-direction: column;
}

.about-bio {
  font-family: var(--font-primary);
  font-size: var(--text-body-size);
  font-weight: var(--text-body-weight);
  line-height: var(--text-body-line-height);
  letter-spacing: var(--text-body-letter-spacing);
  font-variation-settings: var(--font-opsz);
  color: var(--color-white);
  margin-bottom: var(--space-normal);
}

/* ─── Accordions ─────────────────────────────────────────── */

.about-accordions {
  border-top: 1px solid var(--color-white);
}

.accordion {
  border-bottom: 1px solid var(--color-white);
}

.accordion__header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-16) 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
}

.accordion__title {
  font-family: var(--font-primary);
  font-size: var(--text-lead-size);
  font-weight: var(--text-lead-weight);
  line-height: var(--text-lead-line-height);
  letter-spacing: var(--text-lead-letter-spacing);
  font-variation-settings: var(--font-opsz);
  color: var(--color-white);
}

/* Plus icon: CSS cross, scales with lead size */
.accordion__icon {
  position: relative;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  margin-left: var(--space-normal);
  transition: transform var(--duration-med) var(--ease-smooth);
}

.accordion__icon::before,
.accordion__icon::after {
  content: '';
  position: absolute;
  background: var(--color-white);
  border-radius: 1px;
}

/* horizontal bar */
.accordion__icon::before {
  top: 50%;
  left: 0;
  width: 100%;
  height: 1.5px;
  transform: translateY(-50%);
}

/* vertical bar */
.accordion__icon::after {
  left: 50%;
  top: 0;
  width: 1.5px;
  height: 100%;
  transform: translateX(-50%);
  transition: transform var(--duration-med) var(--ease-smooth),
              opacity var(--duration-med) var(--ease-smooth);
}

.accordion.is-open .accordion__icon::after {
  transform: translateX(-50%) rotate(90deg);
  opacity: 0;
}

/* ─── Accordion Body ─────────────────────────────────────── */

.accordion__body {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--duration-med) var(--ease-smooth);
}

.accordion__body-inner {
  padding-bottom: var(--space-small);
}

/* ─── Experience / Education rows ────────────────────────── */

.accordion__exp-list {
  list-style: none;
  display: flex;
  flex-direction: column;
}

.accordion__exp-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: var(--space-16) 0;
}

.exp-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.exp-role {
  font-family: var(--font-primary);
  font-size: var(--text-body-medium-size);
  font-weight: var(--text-body-medium-weight);
  line-height: var(--text-body-medium-line-height);
  font-variation-settings: var(--font-opsz);
  color: var(--color-white);
}

.exp-company {
  font-family: var(--font-primary);
  font-size: var(--text-body-size);
  font-weight: var(--text-body-weight);
  line-height: var(--text-body-line-height);
  font-variation-settings: var(--font-opsz);
  color: var(--color-gray-font);
}

.exp-date {
  font-family: var(--font-primary);
  font-size: var(--text-body-size);
  font-weight: var(--text-body-weight);
  line-height: var(--text-body-line-height);
  font-variation-settings: var(--font-opsz);
  color: var(--color-gray-font);
  white-space: nowrap;
  padding-left: var(--space-normal);
  padding-top: 2px;
}

/* ─── Skills bullet list ─────────────────────────────────── */

.accordion__bullet-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.accordion__bullet-list li {
  font-family: var(--font-primary);
  font-size: var(--text-body-medium-size);
  font-weight: var(--text-body-medium-weight);
  line-height: var(--text-body-medium-line-height);
  font-variation-settings: var(--font-opsz);
  color: var(--color-white);
  padding-left: var(--space-16);
  position: relative;
}

.accordion__bullet-list li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--color-white);
}

/* ─── Link lists (Publicity, Clients) ────────────────────── */

.accordion__link-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.accordion__link-list li {
  position: relative;
  padding-left: var(--space-16);
}

/* › prefix */
.accordion__link-list li::before {
  content: '›';
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-primary);
  font-size: var(--text-body-medium-size);
  font-weight: var(--text-body-medium-weight);
  line-height: var(--text-body-medium-line-height);
  color: var(--color-gray-font);
  transition: color var(--duration-fast) var(--ease-out);
}

.accordion__link-list li:hover::before {
  color: var(--color-highlight-1);
}

.accordion__link-list li a,
.accordion__link-list li .link-no-href {
  font-family: var(--font-primary);
  font-size: var(--text-body-medium-size);
  font-weight: var(--text-body-medium-weight);
  line-height: var(--text-body-medium-line-height);
  font-variation-settings: var(--font-opsz);
  color: var(--color-white);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

.accordion__link-list li a:hover {
  color: var(--color-highlight-1);
}

.accordion__link-list li .link-no-href {
  color: var(--color-white);
  cursor: default;
}

.accordion__link-list li:has(.link-no-href):hover::before {
  color: var(--color-white);
}

/* ─── Bullet link list (Clients) ─────────────────────────── */

.accordion__bullet-link-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.accordion__bullet-link-list li {
  position: relative;
  padding-left: var(--space-16);
}

.accordion__bullet-link-list li::before {
  content: '•';
  position: absolute;
  left: 0;
  font-family: var(--font-primary);
  font-size: var(--text-body-medium-size);
  font-weight: var(--text-body-medium-weight);
  line-height: var(--text-body-medium-line-height);
  color: var(--color-white);
  transition: color var(--duration-fast) var(--ease-out);
}

.accordion__bullet-link-list li:hover::before {
  color: var(--color-highlight-1);
}

.accordion__bullet-link-list li a {
  font-family: var(--font-primary);
  font-size: var(--text-body-medium-size);
  font-weight: var(--text-body-medium-weight);
  line-height: var(--text-body-medium-line-height);
  font-variation-settings: var(--font-opsz);
  color: var(--color-white);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

.accordion__bullet-link-list li a:hover {
  color: var(--color-highlight-1);
}

/* Spacing between client groups (no line) */
.accordion__divider {
  height: var(--space-16);
}

/* Footer: siehe .site-footer in components.css (global) */


/* ─── Mobile (≤768px) ────────────────────────────────────────
   Reihenfolge: Titel → quadratisches Bild → Bio → Akkordions.
   Kein Hover-Swap (Touch). */
@media (max-width: 768px) {
  .about-layout {
    grid-template-columns: 1fr;
    gap: var(--space-normal);
  }

  /* Foto im natürlichen Hochformat (wie Desktop) — kein Quadrat-Crop */
  .about-photo {
    overflow: hidden;
  }

  .about-photo__img--main {
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  .about-photo__img--second { display: none; }
  .about-photo:hover .about-photo__img--main { visibility: visible; }

  .about-title { margin-bottom: var(--space-small); }
}