/* =====================================================================
   Inner pages (Skills / About / Contact) — layered on top of styles.css
   body.page-scroll  : page scrolls, scenery fixed to the bottom
   .card / .btn--grad: shared dark card system
   ===================================================================== */

:root {
  --card-top: #1b1736;
  --card-bottom: #2c1f5e;
  --card-line: rgba(255, 255, 255, 0.08);
  --card-head: rgba(255, 255, 255, 0.07);
  --lavender: #cdbcff;
  --grad-a: #6b4dff;
  --grad-b: #a78bfa;
  --tile-size: 105px;
}

/* ---------- Page: this one scrolls ---------- */
body.page-scroll {
  overflow: hidden auto;
}

.page-scroll .page {
  height: auto;
  min-height: 100dvh;
  overflow: visible;
}

/* Fixed scenery behind the content */
.page-scroll .scenery {
  position: fixed;
  inset: auto 0 0 0;
  height: min(32.6vw, 62vh);
  max-height: none;
  min-height: 0;
  margin: 0;
  flex: none;
  overflow: hidden;
  z-index: 0;
}

.page-scroll .scenery__img {
  top: -11.6vw;
}

.page-scroll .paper {
  position: fixed;
}

.page-scroll .nav {
  z-index: 8;
}

/* ---------- Title ---------- */
.skills {
  position: relative;
  z-index: 4;
  padding: clamp(40px, 8vh, 96px) 20px clamp(120px, 20vh, 220px);
}

.skills__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(18px, 3vh, 32px);
  margin-bottom: clamp(36px, 6vh, 64px);
}

.skills__title .headline {
  margin: 0;
  font-size: clamp(56px, 8.4vw, 118px);
}

.skills__title .toolbar {
  margin: 0;
}

/* ---------- Grid ---------- */
.skills-grid {
  display: grid;
  grid-template-columns: minmax(0, 440px) minmax(0, 540px);
  gap: 48px 56px;
  justify-content: center;
  align-items: start;
  max-width: 1100px;
  margin-inline: auto;
}

.skills-col {
  display: grid;
  gap: 48px;
  min-width: 0;
}

/* ---------- Card (styled as a macOS window) ---------- */
.card {
  position: relative;
  padding: 0 16px 16px;
  border-radius: 16px;
  background: linear-gradient(180deg, var(--card-top) 0%, var(--card-bottom) 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.6),          /* dark outline like a real window */
    0 30px 60px -30px rgba(20, 10, 60, 0.6);
}

/* Offset black "stacked" sheet behind the card */
.card::before {
  content: "";
  position: absolute;
  inset: 16px -16px -16px 16px;
  border-radius: inherit;
  background: #050505;
  z-index: -1;
}

/* Title bar: full-width strip flush with the top of the window */
.card__head {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  margin: 0 -16px 0;
  padding: 10px 14px;
  border-radius: 15px 15px 0 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
  border-bottom: 1px solid rgba(0, 0, 0, 0.45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

/* Traffic lights */
.card__head::before {
  content: "";
  justify-self: start;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ff5f57;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.18),
    20px 0 0 #febc2e,
    20px 0 0 1px rgba(0, 0, 0, 0.18) inset,
    40px 0 0 #28c840;
}

/* Empty right cell keeps the title perfectly centred */
.card__head::after {
  content: "";
  width: 52px;
  justify-self: end;
}

/* Icon + title sit together in the centre cell */
.card__icon {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: #fff;
  color: #14112a;
  flex: none;
  grid-column: 2;
  justify-self: end;
  margin-right: -4px;
}

.card__icon svg {
  width: 15px;
  height: 15px;
}

.card__title {
  grid-column: 2;
  margin: 0;
  font-size: clamp(17px, 1.3vw, 19px);
  font-weight: 400;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* Put icon and title on one line inside the centre cell */
.card__head {
  grid-template-columns: 1fr auto auto 1fr;
}
.card__icon { grid-column: 2; }
.card__title { grid-column: 3; }
.card__head::after { grid-column: 4; }

.card__title strong,
.card__sub strong,
.card__list strong {
  font-weight: 700;
}

.card__list {
  list-style: none;
  margin: 24px 0 0;
  padding: 0 0 0 4px;
  display: grid;
  gap: 18px;
}

.card__list li {
  position: relative;
  padding-left: 36px;
  font-size: clamp(18px, 1.55vw, 22px);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

/* Double-quote marker */
.card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 22px;
  height: 18px;
  background-color: #fff;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20'><path d='M0 12.4C0 6.5 3.4 2.1 9.3 0l1.3 2.6C6.9 4.2 5.1 6.5 4.8 9.3c.6-.2 1.2-.3 1.9-.3 2.7 0 4.6 2 4.6 4.8S9.2 20 6.2 20C2.5 20 0 17.2 0 12.4zm12.9 0c0-5.9 3.4-10.3 9.3-12.4l1.3 2.6c-3.7 1.6-5.5 3.9-5.8 6.7.6-.2 1.2-.3 1.9-.3 2.7 0 4.6 2 4.6 4.8S22.1 20 19.1 20c-3.7 0-6.2-2.8-6.2-7.6z'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20'><path d='M0 12.4C0 6.5 3.4 2.1 9.3 0l1.3 2.6C6.9 4.2 5.1 6.5 4.8 9.3c.6-.2 1.2-.3 1.9-.3 2.7 0 4.6 2 4.6 4.8S9.2 20 6.2 20C2.5 20 0 17.2 0 12.4zm12.9 0c0-5.9 3.4-10.3 9.3-12.4l1.3 2.6c-3.7 1.6-5.5 3.9-5.8 6.7.6-.2 1.2-.3 1.9-.3 2.7 0 4.6 2 4.6 4.8S22.1 20 19.1 20c-3.7 0-6.2-2.8-6.2-7.6z'/></svg>") no-repeat center / contain;
}

.card__note {
  margin: 22px 0 0;
  color: var(--lavender);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
}

.card__note + .card__note {
  margin-top: 14px;
}

.card__sub {
  margin: 30px 0 0;
  font-size: clamp(20px, 1.7vw, 24px);
  font-weight: 400;
  letter-spacing: -0.01em;
}

.card__sub + .card__note {
  margin-top: 12px;
}

.card__actions {
  display: grid;
  gap: 14px;
  margin-top: 22px;
}

.card__actions .btn--grad {
  margin-top: 0;
}

/* ---------- Gradient button ---------- */
.btn--grad {
  margin-top: 22px;
  width: 100%;
  justify-content: center;
  padding: 15px 20px;
  border-radius: 12px;
  background: linear-gradient(90deg, var(--grad-a) 0%, var(--grad-b) 100%);
  color: #fff;
  font-weight: 500;
  font-size: 16px;
  box-shadow: 0 12px 28px -14px rgba(107, 77, 255, 0.9);
}

.btn--grad:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 34px -14px rgba(107, 77, 255, 1);
  filter: saturate(1.1);
}

.btn__ico {
  flex: none;
}

/* ---------- Tool tiles ---------- */
.tiles {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, var(--tile-size));
  gap: 26px;
}

.tile {
  position: relative;
  width: var(--tile-size);
  height: var(--tile-size);
  border-radius: 24px;
  display: grid;
  place-items: center;
  cursor: default;
  outline: none;
  /* bevelled frame */
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.22),
    inset 0 -3px 0 rgba(0, 0, 0, 0.35),
    inset 0 2px 0 rgba(255, 255, 255, 0.18),
    0 14px 26px -14px rgba(0, 0, 0, 0.7);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.tile:hover,
.tile:focus-visible {
  transform: translateY(-4px);
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.32),
    inset 0 -3px 0 rgba(0, 0, 0, 0.35),
    inset 0 2px 0 rgba(255, 255, 255, 0.22),
    0 22px 34px -14px rgba(0, 0, 0, 0.75);
}

.tile:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.tile img,
.tile svg {
  display: block;
  pointer-events: none;
}

.tile img {
  width: 62%;
  height: 62%;
  object-fit: contain;
  border-radius: 16px;
}

/* Brand backgrounds */
.tile--figma  { background: linear-gradient(160deg, #4a4a4a 0%, #1c1c1c 100%); }
.tile--ps     { background: linear-gradient(160deg, #2a79c9 0%, #0d2f57 100%); }
.tile--ae     { background: linear-gradient(160deg, #5a55c9 0%, #2c2686 100%); }
.tile--ai     { background: linear-gradient(160deg, #d8681a 0%, #6a2f07 100%); }
.tile--pr     { background: linear-gradient(160deg, #5b4fe6 0%, #2b2288 100%); }
.tile--claude { background: linear-gradient(160deg, #e0775a 0%, #a8462a 100%); }
.tile--linear { background: linear-gradient(160deg, #545460 0%, #1f1f26 100%); }
.tile--slack  { background: linear-gradient(160deg, #ffffff 0%, #dedeeb 100%); }
.tile--higgs  { background: linear-gradient(160deg, #d9ff2a 0%, #6f8f00 100%); }
.tile--plus   { background: linear-gradient(160deg, #e0403b 0%, #8b1a17 100%); }

.tile--ae img,
.tile--pr img,
.tile--ai img {
  width: 66%;
  height: 66%;
}

.tile--higgs img {
  width: 64%;
  height: 64%;
}

.tile--linear img {
  width: 58%;
  height: 58%;
  border-radius: 0;
}

.tile--slack img {
  width: 56%;
  height: 56%;
  border-radius: 0;
}

.tile--figma svg {
  width: 40%;
  height: auto;
}

.tile--claude svg {
  width: 62%;
  height: 62%;
}

.tile--plus svg {
  width: 52%;
  height: 52%;
}

/* Photoshop badge drawn in CSS (no raw logo supplied) */
.adobe-badge {
  display: grid;
  place-items: center;
  width: 66%;
  height: 66%;
  border-radius: 16px;
  background: #001e36;
  color: #31a8ff;
  font-weight: 700;
  font-size: 30px;
  letter-spacing: -0.02em;
  line-height: 1;
}

/* ---------- Tooltips ---------- */
.tile[data-tip]::after,
.tile[data-tip]::before {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 12px);
  z-index: 5;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 6px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.tile[data-tip]::after {
  content: attr(data-tip);
  padding: 8px 12px;
  border-radius: 10px;
  background: #0a0a0a;
  color: #fff;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.8);
}

/* Little arrow */
.tile[data-tip]::before {
  content: "";
  bottom: calc(100% + 6px);
  border: 6px solid transparent;
  border-top-color: #0a0a0a;
  border-bottom: 0;
}

.tile:hover::after,
.tile:hover::before,
.tile:focus-visible::after,
.tile:focus-visible::before {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Long tooltip can wrap on narrow screens */
.tile--plus[data-tip]::after {
  white-space: normal;
  width: max-content;
  max-width: 220px;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .tile,
  .tile::after,
  .tile::before,
  .btn--grad {
    transition: none;
  }
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .skills-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 40px 32px;
  }

  :root {
    --tile-size: 88px;
  }

  .tiles {
    gap: 18px;
  }
}

@media (max-width: 820px) {
  .skills {
    padding-top: 28px;
  }

  .skills__title .toolbar {
    width: min(529px, 92vw);
  }

  .skills-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
    max-width: 560px;
  }

  .card::before {
    inset: 12px -10px -12px 10px;
  }

  .tiles {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
  }

  .tile {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    border-radius: 20px;
  }

  .adobe-badge {
    font-size: 22px;
  }

  .card__list li {
    font-size: 18px;
  }

  /* Tooltips on touch: show below the tile to avoid clipping at the top row */
  .tile[data-tip]::after {
    font-size: 12px;
  }
}

@media (max-width: 400px) {
  .tiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ---------- Dark theme tweaks for the window cards ---------- */
:root[data-theme="dark"] .card {
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.8),
    0 30px 60px -30px rgba(0, 0, 0, 0.9);
}

:root[data-theme="dark"] .card::before {
  background: #000;
}