/* ============================================================
   Profile layout — banner, sticky card, tabs, skill bars
   ============================================================ */

/* ---------- Banner ---------- */
.jk-banner {
  min-height: 190px;
  background:
    linear-gradient(135deg, #1b2735 0%, #26364a 45%, #1f2a38 100%);
  background-size: cover;
  background-position: center;
  border-radius: 0;
}

@media (min-width: 782px) {
  .jk-banner {
    min-height: 230px;
  }
}

/* ---------- Two-column shell ---------- */
.jk-shell {
  margin-top: -86px;
  position: relative;
  z-index: 1;
}

@media (max-width: 781px) {
  .jk-shell {
    margin-top: -64px;
  }
}

/* ---------- Profile card ---------- */
.jk-profile {
  padding: 0 0 var(--wp--preset--spacing--30);
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 12px;
  background: var(--wp--preset--color--base);
  box-shadow: 0 10px 30px rgba(16, 24, 32, 0.08);
  overflow: hidden;
}

@media (min-width: 992px) {
  .jk-profile {
    position: sticky;
    top: var(--wp--preset--spacing--30);
  }
}

.jk-profile__avatar {
  width: 96px;
  height: 96px;
  margin: var(--wp--preset--spacing--30) auto var(--wp--preset--spacing--20);
  border-radius: 10px;
  overflow: hidden;
  border: 3px solid var(--wp--preset--color--base);
  box-shadow: 0 2px 10px rgba(16, 24, 32, 0.15);
}

.jk-profile__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.jk-profile__body {
  padding: 0 var(--wp--preset--spacing--30);
  text-align: center;
}

.jk-profile__name {
  margin: 0 0 4px;
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.jk-profile__role {
  margin: 0 0 var(--wp--preset--spacing--30);
  font-size: 0.84rem;
  color: var(--wp--preset--color--muted);
  line-height: 1.5;
}

.jk-profile__role a {
  color: var(--wp--preset--color--accent);
}

/* Social row — WordPress core/social-links, so the icons are real */
.jk-profile .wp-block-social-links {
  justify-content: center;
  margin: 0 0 var(--wp--preset--spacing--30);
  gap: 8px;
}

.jk-profile .wp-block-social-link {
  margin: 0;
}

.jk-profile .wp-block-social-link a {
  width: 34px;
  height: 34px;
  padding: 0;
  transition: transform 0.16s ease;
}

.jk-profile .wp-block-social-link:hover a {
  transform: translateY(-2px);
}

/* Short about block inside the card */
.jk-profile__about {
  text-align: left;
  border-top: 1px solid var(--wp--preset--color--line);
  padding-top: var(--wp--preset--spacing--30);
}

.jk-profile__label {
  margin: 0 0 8px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wp--preset--color--muted);
}

.jk-profile__about p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.65;
}

/* ---------- Tabs ---------- */
.jk-tablist {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin: 0 0 var(--wp--preset--spacing--40);
  padding: 6px;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 10px;
  background: var(--wp--preset--color--base);
  list-style: none;
}

.jk-tablist button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--wp--preset--color--muted);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  padding: 0.5rem 0.95rem;
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease;
}

.jk-tablist button:hover {
  color: var(--wp--preset--color--contrast);
}

.jk-tablist button[aria-selected='true'] {
  background: var(--wp--preset--color--surface);
  color: var(--wp--preset--color--contrast);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--wp--preset--color--line);
}

/* Without JS the tablist is meaningless — hide it and show everything. */
.jk-tabs:not(.is-ready) .jk-tablist {
  display: none;
}

.jk-panel h2:first-child {
  margin-top: 0;
}

/* ---------- Skill bars ---------- */
.jk-skills {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
}

.jk-skill__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 5px;
}

.jk-skill__name {
  font-size: 0.9rem;
  font-weight: 500;
}

.jk-skill__level {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--wp--preset--color--muted);
  white-space: nowrap;
}

.jk-skill__track {
  height: 5px;
  border-radius: 999px;
  background: var(--wp--preset--color--line);
  overflow: hidden;
}

.jk-skill__fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--wp--preset--color--accent);
}

.jk-skill__group {
  margin: 0 0 6px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wp--preset--color--accent);
  grid-column: 1 / -1;
}

.jk-skill__group:not(:first-child) {
  margin-top: var(--wp--preset--spacing--30);
}

/* ---------- Services ---------- */
.jk-services {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--wp--preset--spacing--30);
}

/* ---------- Dark mode adjustments ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .jk-profile {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  }
  :root:not([data-theme='light']) .jk-banner {
    background: linear-gradient(135deg, #0f1620 0%, #1b2735 45%, #131b25 100%);
  }
}