/* ======================================================
   ABOUT – robust, single source of truth
   Scope: body[data-page="about"]
   ====================================================== */

body[data-page="about"]{
  /* Layout */
  --about-gap: 18px;

  /* Surfaces */
  --about-card-border: rgba(255,255,255,0.10);
  --about-card-border-soft: rgba(255,255,255,0.08);
  --about-card-bg: rgba(255,255,255,0.02);
  --about-shadow-soft: 0 14px 35px rgba(0,0,0,0.35);

  /* Radius */
  --about-radius-lg: 16px;
  --about-radius-pill: 999px;

  /* Layout proportions */
  --about-left: 1.35fr;
  --about-right: 1fr;

  /* Spotlight */
  --about-spotlight-size: 520px;
  --about-spotlight-a: rgba(168, 85, 247, 0.18);
  --about-spotlight-b: rgba(123, 108, 255, 0.14);

  /* Profile-card avatar (mini) */
  --about-mini-avatar: 112px;
  --about-mini-gap: 16px;
  --about-mini-ring: 1px;
  --about-mini-zoom: 1.22;
  --about-mini-x: 50%;
  --about-mini-y: 16%;

  /* Profile portrait inside hero */
  --about-portrait-h: 300px;
  --about-portrait-h-lg: 340px;
  --about-portrait-maxw: 520px;
  --about-portrait-zoom: 1.10;
  --about-portrait-x: 50%;
  --about-portrait-y: 14%;

  /* Extra portrait card (secondary) */
  --about-portrait2-h: 320px;
  --about-portrait2-h-lg: 360px;
  --about-portrait2-zoom: 1.06;
  --about-portrait2-x: 50%;
  --about-portrait2-y: 18%;
}

/* ======================================================
   PAGE LAYOUT
   ====================================================== */

body[data-page="about"] .about-layout{
  display: grid;
  grid-template-columns: var(--about-left) var(--about-right);
  gap: var(--about-gap);
  align-items: start;
}

@media (max-width: 980px){
  body[data-page="about"] .about-layout{ grid-template-columns: 1fr; }
}

body[data-page="about"] .about-left,
body[data-page="about"] .about-right{
  display: flex;
  flex-direction: column;
  gap: var(--about-gap);
}

/* ======================================================
   ABOUT CARD BASE
   ====================================================== */

body[data-page="about"] .about-card{
  position: relative;
  border-radius: var(--about-radius-lg);
  overflow: hidden;

  padding: 16px;
  border: 1px solid var(--about-card-border-soft);
  background: var(--about-card-bg);
  box-shadow: var(--about-shadow-soft);
}

/* Spotlight overlay */
body[data-page="about"] [data-spotlight]::before{
  content: "";
  position: absolute;
  inset: -2px;
  pointer-events: none;

  opacity: 0;
  transition: opacity 160ms ease;

  background: radial-gradient(
    var(--about-spotlight-size) circle at var(--mx, 50%) var(--my, 50%),
    var(--about-spotlight-a),
    var(--about-spotlight-b),
    transparent 60%
  );
}

body[data-page="about"] [data-spotlight]{
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

body[data-page="about"] [data-spotlight]:hover{
  transform: translateY(-2px);
  border-color: rgba(168, 85, 247, 0.30);
  box-shadow: 0 18px 46px rgba(0,0,0,0.38);
}

body[data-page="about"] [data-spotlight]:hover::before{ opacity: 1; }

/* ======================================================
   HERO (about-hero-card uses profile-card markup)
   ====================================================== */

body[data-page="about"] .about-profile-card .profile-header{
  display: grid;
  grid-template-columns: var(--about-mini-avatar) 1fr;
  gap: var(--about-mini-gap);
  align-items: start;
}

body[data-page="about"] .about-profile-card .profile-avatar{
  width: var(--about-mini-avatar);
  height: var(--about-mini-avatar);
  border-radius: var(--about-radius-pill);
  overflow: hidden;

  border: var(--about-mini-ring) solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.03);
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}

body[data-page="about"] .about-profile-card .profile-avatar img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: var(--about-mini-x) var(--about-mini-y);
  transform: scale(var(--about-mini-zoom));
}

body[data-page="about"] .about-profile-card .profile-grid{
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: var(--about-gap);
  align-items: start;
}

@media (max-width: 980px){
  body[data-page="about"] .about-profile-card .profile-grid{ grid-template-columns: 1fr; }
}

body[data-page="about"] .about-profile-card .profile-tech{
  display: grid;
  gap: 12px;
  align-content: start;
}

body[data-page="about"] .about-profile-card .profile-tech-tags{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

body[data-page="about"] .about-profile-card .profile-portrait{
  width: 100%;
  height: var(--about-portrait-h);
  max-width: var(--about-portrait-maxw);
  margin: 8px auto 0;

  border-radius: var(--about-radius-lg);
  overflow: hidden;

  border: 1px solid var(--about-card-border);
  background: var(--about-card-bg);
  box-shadow: var(--about-shadow-soft);
}

body[data-page="about"] .about-profile-card .profile-portrait img{
  width: 100%;
  height: 100%;
  display: block;

  object-fit: cover;
  object-position: var(--about-portrait-x) var(--about-portrait-y);
  transform: scale(var(--about-portrait-zoom));
}

body[data-page="about"] .about-profile-card .profile-intro{
  grid-column: 1 / -1;
  margin-top: 2px;
}

@media (min-width: 1200px){
  body[data-page="about"]{ --about-portrait-h: var(--about-portrait-h-lg); }
}

/* ======================================================
   VALUES STACK
   ====================================================== */

body[data-page="about"] .about-values-stack{
  display: grid;
  gap: var(--about-gap);
}

body[data-page="about"] .about-card-title{
  margin: 0 0 8px;
  font-weight: 800;
  opacity: 0.95;
}

body[data-page="about"] .about-card-text{
  margin: 0;
  opacity: 0.88;
  line-height: 1.5;
}

/* ======================================================
   SECONDARY PORTRAIT CARD
   ====================================================== */

body[data-page="about"] .about-portrait-figure{
  margin: 0;
  display: grid;
  gap: 10px;
}

body[data-page="about"] .about-portrait-img{
  width: 100%;
  height: var(--about-portrait2-h);
  display: block;

  border-radius: var(--about-radius-lg);
  overflow: hidden;

  object-fit: cover;
  object-position: var(--about-portrait2-x) var(--about-portrait2-y);

  transform: scale(var(--about-portrait2-zoom));
  transform-origin: center;

  border: 1px solid var(--about-card-border);
  background: var(--about-card-bg);
  box-shadow: var(--about-shadow-soft);
}

body[data-page="about"] .about-portrait-caption{
  margin: 0;
  opacity: 0.78;
  font-size: 0.92rem;
}

@media (min-width: 1200px){
  body[data-page="about"]{ --about-portrait2-h: var(--about-portrait2-h-lg); }
}

@media (max-width: 980px){
  body[data-page="about"]{ --about-portrait2-h: 280px; --about-portrait2-y: 16%; }
}

/* ======================================================
   PROMOS (3 cards)
   ====================================================== */

body[data-page="about"] .about-promos-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 12px;
}

body[data-page="about"] .about-promo{
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;

  padding: 14px;
  border-radius: var(--about-radius-lg);
  border: 1px solid var(--about-card-border-soft);
  background: rgba(255,255,255,0.02);

  text-decoration: none;
  color: inherit;
}

body[data-page="about"] .about-promo-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

body[data-page="about"] .about-promo-logo{
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: grid;
  place-items: center;

  font-weight: 900;
  letter-spacing: 0.3px;

  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  opacity: 0.95;
}

body[data-page="about"] .about-promo-badge{
  font-size: 0.78rem;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  opacity: 0.9;
  white-space: nowrap;
}

body[data-page="about"] .about-promo-title{
  font-weight: 900;
  line-height: 1.15;
}

body[data-page="about"] .about-promo-desc{
  opacity: 0.85;
  line-height: 1.4;
}

body[data-page="about"] .about-promo-cta{
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  opacity: 0.9;
}

/* ======================================================
   ABOUT MODULES LAYOUT
   ====================================================== */

body[data-page="about"] .about-modules{
  display: grid;
  gap: var(--about-gap);
}

body[data-page="about"] .about-modules-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--about-gap);
}

@media (max-width: 980px){
  body[data-page="about"] .about-modules-grid{ grid-template-columns: 1fr; }
}

body[data-page="about"] .about-section-header{
  margin-bottom: 14px;
}

body[data-page="about"] .about-section-subtitle{
  opacity: 0.85;
  margin-top: 6px;
}

/* ======================================================
   FEATURED PROJECTS (Utvalda projekt)
   ====================================================== */

body[data-page="about"] .about-featured-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

@media (max-width: 1100px){
  body[data-page="about"] .about-featured-grid{ grid-template-columns: 1fr; }
}

body[data-page="about"] .about-project{
  padding: 16px;
  border-radius: var(--about-radius-lg);
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--about-card-border-soft);
}

body[data-page="about"] .about-project-top{
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
}

body[data-page="about"] .about-project-title{
  margin: 0;
  font-weight: 800;
}

body[data-page="about"] .about-project-desc{
  margin: 10px 0 12px;
  opacity: 0.9;
  line-height: 1.45;
}

body[data-page="about"] .about-project-tags{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body[data-page="about"] .about-project-actions{
  margin-top: 14px;
}

/* ======================================================
   ACCORDION (So jobbar jag / När jag passar)
   ====================================================== */

body[data-page="about"] .about-accordion{
  display: grid;
  gap: 12px;
}

body[data-page="about"] .about-acc-item{
  border-radius: var(--about-radius-lg);
  overflow: hidden;
  border: 1px solid var(--about-card-border-soft);
  background: rgba(255,255,255,0.02);
}

body[data-page="about"] .about-acc-trigger{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;

  padding: 14px;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

body[data-page="about"] .about-acc-title{
  font-weight: 800;
}

body[data-page="about"] .about-acc-icon{
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: var(--about-radius-pill);
  border: 1px solid rgba(255,255,255,0.10);
  opacity: 0.9;
}

body[data-page="about"] .about-acc-panel{
  padding: 0 14px 14px;
}

body[data-page="about"] .about-acc-desc{
  margin: 0;
  opacity: 0.88;
  line-height: 1.45;
}

body[data-page="about"] .about-acc-trigger[aria-expanded="true"] .about-acc-icon{
  border-color: rgba(168, 85, 247, 0.35);
}

body[data-page="about"] .about-module-actions{
  margin-top: 14px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

body[data-page="about"] .about-module-actions .btn{
  border-radius: var(--about-radius-pill);
}

body[data-page="about"] .about-module-actions .btn-primary{
  box-shadow: 0 10px 26px rgba(168, 85, 247, 0.28);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  body[data-page="about"] [data-spotlight],
  body[data-page="about"] [data-spotlight]::before{
    transition: none !important;
  }
  body[data-page="about"] [data-spotlight]:hover{
    transform: none !important;
  }
}


/* ======================================================
   HERO GAP FIX – Highlights block
   ====================================================== */

body[data-page="about"] .about-profile-card .profile-info{
  display: grid;
  gap: 14px;
  align-content: start;
}

body[data-page="about"] .about-profile-card .profile-highlights{
  display: grid;
  gap: 12px;
}

@media (min-width: 1100px){
  body[data-page="about"] .about-profile-card .profile-highlights{
    grid-template-columns: 1fr;
  }
}

/* Each highlight looks like a mini-card but stays cohesive */
body[data-page="about"] .about-profile-card .profile-highlight{
  border-radius: 14px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.015);
}

body[data-page="about"] .about-profile-card .profile-highlight-head{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

body[data-page="about"] .about-profile-card .profile-highlight-icon{
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  flex: 0 0 auto;
}

body[data-page="about"] .about-profile-card .profile-highlight-title{
  font-weight: 800;
  opacity: .95;
}

body[data-page="about"] .about-profile-card .profile-highlight-text{
  margin: 0;
  opacity: .84;
  line-height: 1.45;
  font-size: .95rem;
}

/* Reduced motion: no hover lift for highlight blocks if user prefers */
@media (prefers-reduced-motion: reduce){
  body[data-page="about"] .about-profile-card .profile-highlight{
    transition: none !important;
  }
}


/* ======================================================
   ABOUT – Portrait tuning + subtle tech signal
   ====================================================== */

/* Make the secondary portrait feel a bit more "secondary" */
body[data-page="about"]{
  /* Reduce portrait dominance ~15–20% (safe single variable change) */
  --about-portrait2-h: 270px;
  --about-portrait2-h-lg: 310px;
}

/* Stack portrait + tech signal with consistent spacing */
body[data-page="about"] .about-portrait-stack{
  display: grid;
  gap: 12px;
}

/* Caption: short, crisp, anchor-like */
body[data-page="about"] .about-portrait-caption{
  opacity: 0.82;
  font-size: 0.92rem;
  letter-spacing: 0.2px;
}

/* Tech signal card */
body[data-page="about"] .about-tech-signal{
  border-radius: var(--about-radius-lg);
  border: 1px solid var(--about-card-border-soft);
  background: rgba(255,255,255,0.015);
  padding: 12px;
}

/* Head row */
body[data-page="about"] .about-tech-signal-head{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

body[data-page="about"] .about-tech-signal-icon{
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.02);
  opacity: 0.9;
}

body[data-page="about"] .about-tech-signal-title{
  margin: 0;
  font-weight: 900;
  opacity: 0.92;
  font-size: 0.95rem;
}

/* The "read-only snippet" */
body[data-page="about"] .about-tech-signal-pre{
  margin: 0;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.14);

  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.9rem;
  line-height: 1.45;
  opacity: 0.86;

  overflow: hidden;     /* no scroll */
  white-space: pre;     /* keep formatting */
}

/* Mobile tuning */
@media (max-width: 980px){
  body[data-page="about"]{
    --about-portrait2-h: 240px;
    --about-portrait2-y: 16%;
  }
  body[data-page="about"] .about-tech-signal-pre{
    font-size: 0.88rem;
  }
}



/* ======================================================
   TUNE: Secondary portrait should be more square + less dominant
   ====================================================== */

body[data-page="about"]{
  /* Slightly smaller overall footprint */
  --about-portrait2-h: 240px;
  --about-portrait2-h-lg: 270px;
}

/* Make portrait feel more "square-ish" and centered */
body[data-page="about"] .about-portrait-img{
  max-width: 520px;
  margin: 0 auto;
  aspect-ratio: 5 / 4;     /* tweak: try 4/3 if you want even more square */
  height: auto;            /* let aspect-ratio drive height */
  transform: scale(1.03);  /* reduce zoom a touch */
}

/* If you want even tighter (optional): */
/*
body[data-page="about"] .about-portrait-img{
  aspect-ratio: 4 / 3;
}
*/

/* Give the tech signal a bit more weight (without shouting) */
body[data-page="about"] .about-tech-signal{
  padding: 14px;
}

body[data-page="about"] .about-tech-signal-title{
  font-size: 1rem;
}

body[data-page="about"] .about-tech-signal-pre{
  padding: 14px;
  font-size: 0.92rem;
  opacity: 0.88;
}

/* Mobile */
@media (max-width: 980px){
  body[data-page="about"] .about-portrait-img{
    max-width: 100%;
    aspect-ratio: 4 / 3;
  }
}


/* ======================================================
   TUNE: Secondary portrait should be more square + less dominant
   ====================================================== */

body[data-page="about"]{
  /* Slightly smaller overall footprint */
  --about-portrait2-h: 240px;
  --about-portrait2-h-lg: 270px;
}

/* Make portrait feel more "square-ish" and centered */
body[data-page="about"] .about-portrait-img{
  max-width: 520px;
  margin: 0 auto;
  aspect-ratio: 5 / 4;     /* tweak: try 4/3 if you want even more square */
  height: auto;            /* let aspect-ratio drive height */
  transform: scale(1.03);  /* reduce zoom a touch */
}

/* If you want even tighter (optional): */
/*
body[data-page="about"] .about-portrait-img{
  aspect-ratio: 4 / 3;
  max-width: 480px;
}
*/

/* Give the tech signal a bit more weight (without shouting) */
body[data-page="about"] .about-tech-signal{
  padding: 14px;
}

body[data-page="about"] .about-tech-signal-title{
  font-size: 1.05rem;
  letter-spacing: 0.2px;
}

body[data-page="about"] .about-tech-signal-pre{
  padding: 14px;
  font-size: 0.92rem;
  opacity: 0.88;
}

/* Mobile */
@media (max-width: 980px){
  body[data-page="about"] .about-portrait-img{
    max-width: 100%;
    aspect-ratio: 4 / 3;
  }
}