/* =========================================================
   Mahesh Marath — Portfolio
   Fonts: Geist (variable) + Geist Italic (variable)
   ========================================================= */

@font-face {
  font-family: "Geist";
  src: url("../fonts/Geist-VariableFont_wght.ttf") format("truetype-variations"),
       url("../fonts/Geist-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist";
  src: url("../fonts/Geist-Italic-VariableFont_wght.ttf") format("truetype-variations"),
       url("../fonts/Geist-Italic-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* ---------- Design tokens ---------- */
:root {
  --bg: oklch(0.958 0.004 85);
  --bg-card: oklch(0.985 0.003 85);
  --text-primary: oklch(0.24 0.004 75);
  --text-secondary: oklch(0.58 0.006 80);
  --text-tertiary: oklch(0.58 0.006 80);
  --border: oklch(0.88 0.005 85);
  --border-strong: oklch(0.24 0.004 75);
  --link: var(--text-secondary);
  --link-hover: var(--text-primary);
  --overlay: rgba(23, 23, 23, 0.55);
  --status-green: #1f9254;
  --status-green-bg: #d7f2e3;
  --status-amber: #e0a13a;
  --status-red: #d9534f;
  --status-blue: #4472ff;

  /* Deliberately NOT redefined under [data-theme="dark"] — real photos and
     screenshots (mostly white UI/product shots) get a fixed light mat
     instead of following the page theme, so a dark card background doesn't
     clash with (or make transparent-PNG content on) a white-background
     image illegible. */
  --photo-card-bg: oklch(0.985 0.003 85);

  --font-sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  color-scheme: light;
}

[data-theme="dark"] {
  --bg: oklch(0.185 0.003 75);
  --bg-card: oklch(0.225 0.003 75);
  --text-primary: oklch(0.93 0.003 85);
  --text-secondary: oklch(0.64 0.005 80);
  --text-tertiary: oklch(0.64 0.005 80);
  --border: oklch(1 0 0 / 10%);
  --border-strong: oklch(0.93 0.003 85);
  --overlay: rgba(0, 0, 0, 0.65);
  color-scheme: dark;
}

/* ---------- Reset ---------- */
* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-weight: 450;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.025em;
  font-feature-settings: "ss02", "ss03", "ss06", "ss07", "ss08";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.2s ease, color 0.2s ease;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

p {
  margin: 0;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

/* ---------- Layout ---------- */
.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.shell {
  width: 100%;
  max-width: 576px;
  margin: 0 auto;
  padding: 50px 24px 40px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.column {
  width: 100%;
}

/* ---------- Header / logo ---------- */
.site-header {
  margin-bottom: 40px;
}

.logo-link {
  display: inline-flex;
  align-items: center;
}

.logo {
  width: 20px;
  height: 14px;
  display: block;
}

.logo path {
  fill: var(--text-primary);
}

/* ---------- Typography ---------- */
/* Shrink-wraps to whichever line (name or role) renders wider, so the
   portrait's gap below is measured from the true edge of the text block
   rather than just the (usually shorter) name line. */
.hero-text {
  position: relative;
  display: inline-block;
}

.name-trigger {
  display: inline-block;
}

.name {
  font-size: 16px;
  font-weight: 500;
  margin: 0;
  color: var(--text-primary);
}

/* Hidden entirely by default — only devices with real mouse hover (not
   touch) get the reveal-on-hover portrait, per the "disable on mobile"
   requirement, rather than just suppressing the hover effect there. */
.name-portrait {
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  .name-portrait {
    display: block;
    position: absolute;
    /* Aligns the portrait's top edge with the logo's top edge, rather
       than centering it on the name line. */
    top: -60.5px;
    left: calc(100% + 130px);
    width: 140px;
    height: 140px;
    max-width: none;
    object-fit: cover;
    border-radius: 10px;
    opacity: 0;
    pointer-events: none;
    transform: scale(0.96);
    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index: 5;
  }

  /* Two stacked images, same position — only one is ever shown, picked by
     theme (the dark version has a black background painted into the
     artwork itself, so it needs the dark page behind it, and vice versa). */
  .name-portrait--dark {
    display: none;
  }

  [data-theme="dark"] .name-portrait--light {
    display: none;
  }

  [data-theme="dark"] .name-portrait--dark {
    display: block;
  }

  /* Sibling combinator (not a descendant selector) so hovering .role,
     which sits between the trigger and the portrait in the markup,
     can never match — only .name-trigger itself can. */
  .name-trigger:hover ~ .name-portrait {
    opacity: 1;
    transform: scale(1);
  }
}

.role {
  font-size: 16px;
  color: var(--text-secondary);
  margin: 0;
}

.hero-block {
  margin: 0;
}

.section {
  margin-top: 56px;
}

.section-title {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-primary);
  margin: 0;
}

.section-body {
  margin-top: 0;
}

.section-body p + p {
  margin-top: 4px;
}

.section-body p {
  color: var(--text-secondary);
}

.link-list {
  margin-top: 0;
}

.link-list li + li {
  margin-top: 8px;
}

.text-link {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--border);
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.text-link:hover {
  color: var(--link-hover);
  text-decoration-color: var(--link-hover);
}

/* ---------- Footer ---------- */
.site-footer {
  margin-top: auto;
  padding-top: 128px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-tertiary);
}

.theme-toggle {
  display: inline-flex;
  gap: 10px;
}

.theme-toggle button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  color: var(--text-tertiary);
}

.theme-toggle button svg {
  width: 16px;
  height: 16px;
}

.theme-toggle button[aria-pressed="true"] {
  color: var(--text-primary);
}

/* =========================================================
   Case study page
   ========================================================= */

.case-title {
  font-size: 16px;
  font-weight: 500;
  margin: 0;
  color: var(--text-primary);
}

.case-subtitle {
  font-size: 16px;
  color: var(--text-secondary);
  margin: 0;
}

.case-hero-inline {
  margin: 24px 0;
}

.case-section h2 {
  font-size: 16px;
  font-weight: 500;
  margin: 0;
  color: var(--text-primary);
}

.case-section p {
  color: var(--text-secondary);
  margin: 0;
}

.case-section p + p {
  margin-top: 16px;
}

.case-section {
  margin-top: 64px;
}

.column > .case-section:first-of-type {
  margin-top: 48px;
}

.case-section h3 {
  font-size: 14px;
  font-weight: 600;
  margin: 24px 0 0 0;
  color: var(--text-primary);
}

.case-section h3:first-child {
  margin-top: 0;
}

.case-section ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.case-section ul + p,
.case-section p + ul {
  margin-top: 10px;
}

.case-section h3 + ul {
  margin-top: 0;
}

.case-section li {
  position: relative;
  padding-left: 16px;
  color: var(--text-secondary);
}

.case-section li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--text-tertiary);
}

.case-section li + li {
  margin-top: 6px;
}

.case-image-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 40px 0 0 0;
}

.case-embed {
  position: relative;
  aspect-ratio: 16 / 9;
  margin: 40px 0 0 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--photo-card-bg);
}

.case-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.case-image-row .case-shot-wrap {
  min-width: 0;
}

.case-shot-caption {
  margin-top: 12px;
  font-size: 13px;
  color: var(--text-secondary);
  text-align: center;
}

/* ---------- Mock browser screenshot card (placeholder + real) ---------- */
.case-shot {
  display: block;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--photo-card-bg);
  cursor: zoom-in;
  padding: 5px;
  text-align: left;
}

.case-shot img {
  width: 100%;
  display: block;
  border-radius: 6px;
}

/* Real photo/screenshot shots: inside a multi-image comparison row they're
   cropped to a consistent 4:3 grid tile so mixed-aspect-ratio uploads line
   up cleanly. Standalone shots keep their natural aspect ratio, since a
   single hero image or a wide diagram loses real content when force-cropped.
   Either way the lightbox always shows the image uncropped. */
.case-image-row .case-photo {
  aspect-ratio: 4 / 3;
}

.case-image-row .case-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =========================================================
   Lightbox / Image preview overlay
   ========================================================= */

.lightbox {
  position: fixed;
  inset: 0;
  background: var(--overlay);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  z-index: 100;
}

.lightbox.is-open {
  display: flex;
}

.lightbox-card {
  position: relative;
  background: var(--photo-card-bg);
  border-radius: 16px;
  max-width: 720px;
  width: 100%;
  max-height: 86vh;
  overflow: auto;
  padding: 32px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.25);
}

.lightbox-card img {
  width: 100%;
  border-radius: 8px;
}

.lightbox-close {
  position: fixed;
  top: 32px;
  right: 32px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
  z-index: 101;
}

.lightbox-close svg {
  width: 18px;
  height: 18px;
}

/* =========================================================
   Password gate
   ========================================================= */

html.gate-locked .page {
  display: none;
}

.password-gate {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

html.gate-locked .password-gate {
  display: flex;
}

.password-gate-card {
  width: 100%;
  max-width: 320px;
}

.password-gate-card h2 {
  font-size: 16px;
  font-weight: 500;
  margin: 0;
  color: var(--text-primary);
}

.password-gate-card p {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0 0 20px 0;
}

.password-gate-form {
  display: flex;
  gap: 8px;
}

.password-gate-form input {
  flex: 1;
  min-width: 0;
  font-family: inherit;
  font-size: 14px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-card);
  color: var(--text-primary);
}

.password-gate-form input:focus {
  outline: none;
  border-color: var(--border-strong);
}

.password-gate-form button {
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  padding: 9px 16px;
  border-radius: 6px;
  background: var(--text-primary);
  color: var(--bg);
  white-space: nowrap;
}

.password-gate-error {
  font-size: 13px;
  color: #d9534f;
  margin: 10px 0 0 0;
  min-height: 16px;
}

/* =========================================================
   Admin system
   ========================================================= */

[data-admin-trigger] {
  cursor: default;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.admin-pressing {
  opacity: 0.5;
  transform: scale(0.98);
}

.admin-hidden-tag {
  font-size: 11px;
  color: var(--text-tertiary);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 6px;
  margin-left: 6px;
  vertical-align: middle;
}

/* ---------- floating admin bar ---------- */
.admin-bar {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 300;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  flex-wrap: wrap;
  max-width: calc(100vw - 32px);
}

.admin-bar-tag {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-primary);
  background: var(--border);
  border-radius: 4px;
  padding: 3px 6px;
}

/* ---------- buttons ---------- */
.admin-btn {
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 6px;
  background: var(--text-primary);
  color: var(--bg);
  white-space: nowrap;
}

.admin-btn--sm {
  font-size: 12px;
  padding: 6px 10px;
}

.admin-btn--ghost {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border);
}

.admin-btn--danger {
  background: transparent;
  color: #d9534f;
  border: 1px solid #d9534f;
}

.admin-file-btn {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.admin-icon-btn {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  color: var(--text-secondary);
  font-size: 13px;
}

.admin-icon-btn:hover {
  background: var(--border);
  color: var(--text-primary);
}

.admin-icon-btn--danger:hover {
  color: #d9534f;
}

.admin-link {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-size: 13px;
}

/* ---------- modal shell ---------- */
.admin-modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay);
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.admin-modal {
  background: var(--bg-card);
  border-radius: 14px;
  width: 100%;
  max-width: 420px;
  max-height: 86vh;
  overflow-y: auto;
  padding: 28px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.3);
}

.admin-modal--wide {
  max-width: 680px;
}

.admin-modal h2 {
  font-size: 16px;
  font-weight: 500;
  margin: 0 0 14px 0;
  color: var(--text-primary);
}

.admin-modal-hint {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0 0 16px 0;
  line-height: 1.5;
}

.admin-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 20px;
}

body.admin-modal-open {
  overflow: hidden;
}

/* ---------- form controls ---------- */
.admin-label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  margin: 14px 0 6px 0;
}

.admin-label:first-of-type {
  margin-top: 0;
}

.admin-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.admin-link-btn {
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 7px;
  white-space: nowrap;
}

.admin-link-btn:hover {
  color: var(--text-primary);
  border-color: var(--text-primary);
}

.admin-input,
.admin-textarea {
  width: 100%;
  font-family: inherit;
  font-size: 14px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text-primary);
  box-sizing: border-box;
}

.admin-input--sm {
  font-size: 13px;
  padding: 6px 8px;
}

.admin-textarea {
  resize: vertical;
  line-height: 1.5;
}

.admin-input:focus,
.admin-textarea:focus {
  outline: none;
  border-color: var(--border-strong);
}

.admin-form-error {
  font-size: 13px;
  color: #d9534f;
  min-height: 16px;
  margin: 10px 0 0 0;
}

/* ---------- switch ---------- */
.admin-switch {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 20px;
}

.admin-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.admin-switch span {
  position: absolute;
  inset: 0;
  background: var(--border);
  border-radius: 20px;
  transition: background 0.15s ease;
}

.admin-switch span::before {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  left: 3px;
  top: 3px;
  background: var(--bg-card);
  border-radius: 50%;
  transition: transform 0.15s ease;
}

.admin-switch input:checked + span {
  background: var(--text-primary);
}

.admin-switch input:checked + span::before {
  transform: translateX(14px);
}

/* ---------- manage-studies list ---------- */
.admin-study-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.admin-study-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
}

.admin-study-card-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 10px;
}

.admin-reorder-controls {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}

.admin-icon-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

.admin-icon-btn:disabled:hover {
  background: none;
  color: var(--text-secondary);
}

.admin-study-card-fields {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-bottom: 10px;
}

.admin-study-field {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-secondary);
}

.admin-study-field--grow {
  flex: 1;
  min-width: 140px;
}

.admin-study-field--grow input {
  flex: 1;
}

.admin-row-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.admin-new-study {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

.admin-new-study .admin-input {
  flex: 1;
}

.admin-group-card {
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 12px;
  background: var(--bg);
}

.admin-group-card .admin-study-card-title input[data-group-name] {
  flex: 1;
  min-width: 0;
}

.admin-group-members {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
  padding-left: 14px;
  border-left: 2px solid var(--border);
}

.admin-group-members .admin-modal-hint {
  margin: 0;
}

/* ---------- block editor ---------- */
.admin-blocks {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  /* No gap — each .admin-insert-point between blocks provides the spacing
     (and doubles as the hover target for inserting a new block there). */
}

.admin-block {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
}

.admin-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.admin-block-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.admin-block-type {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-tertiary);
}

.admin-block-controls {
  display: flex;
  gap: 2px;
}

/* ---------- inline block-insertion points ---------- */
.admin-insert-point {
  position: relative;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.admin-insert-point::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: var(--border);
  opacity: 0;
  transition: opacity 0.15s ease;
}

.admin-insert-point:hover::before,
.admin-insert-point.is-open::before {
  opacity: 1;
}

.admin-insert-btn {
  position: relative;
  z-index: 1;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.15s ease, transform 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.admin-insert-point:hover .admin-insert-btn,
.admin-insert-point.is-open .admin-insert-btn {
  opacity: 1;
  transform: scale(1);
}

.admin-insert-btn:hover {
  background: var(--text-primary);
  color: var(--bg);
  border-color: var(--text-primary);
}

.admin-insert-menu {
  position: absolute;
  top: 26px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  width: max-content;
  max-width: 260px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.admin-insert-menu[hidden] {
  display: none;
}

.admin-image-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}

.admin-image-item {
  width: 140px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.admin-cover-row {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

.admin-image-item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg);
}

/* ---------- toast ---------- */
.admin-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 12px);
  background: var(--text-primary);
  color: var(--bg);
  font-size: 13px;
  padding: 10px 16px;
  border-radius: 8px;
  z-index: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  max-width: calc(100vw - 32px);
  text-align: center;
}

.admin-toast--error {
  background: #d9534f;
}

.admin-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.case-not-found {
  color: var(--text-secondary);
}

/* =========================================================
   Grouped past work: tile button + popover card deck
   ========================================================= */

.past-work-group-btn {
  font: inherit;
  text-align: left;
}

/* ---------- popover overlay ---------- */
.group-popover {
  position: fixed;
  inset: 0;
  background: var(--overlay);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 100;
}

.group-popover.is-open {
  display: flex;
}

.group-popover-close {
  position: fixed;
  top: 32px;
  right: 32px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
  z-index: 101;
}

.group-popover-close svg {
  width: 18px;
  height: 18px;
}

.group-popover-card {
  width: 100%;
  max-width: 480px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 30px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.25);
  text-align: center;
}

.group-popover-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
  margin: 0;
}

/* ---------- fanned card deck ---------- */
.group-popover-stack {
  position: relative;
  /* No explicit width: a block element left at its default width:auto
     shrinks to fill the available space minus its margins, which is what
     actually centers it. width: 100% here would size the box to the full
     content area *and then add* the side margins on top of that, pushing
     the whole stack (and the center card inside it) off-center. */
  aspect-ratio: 1.35 / 1;
  /* Extra side margin (beyond the card's own padding) guarantees the fan
     never crowds the popover's edges, whatever the exact transform math
     works out to. */
  margin: 20px 40px 16px;
  cursor: pointer;
}

/* Every layer shares the CENTER slot's base position/size; left and right
   are purely transform offsets from there, so role changes animate via
   the transition below instead of relayout. */
.group-popover-layer {
  position: absolute;
  left: 18%;
  top: 5%;
  width: 64%;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--photo-card-bg);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
  padding: 5px;
  will-change: transform, opacity;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.36s ease-out;
}

.group-popover-layer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 10px;
}

.group-popover-layer[data-role="center"] {
  transform: none;
  opacity: 1;
  z-index: 3;
}

.group-popover-layer[data-role="left"] {
  transform: translate(-48%, 10%) rotate(-8deg) scale(0.88);
  opacity: 0.9;
  z-index: 2;
}

.group-popover-layer[data-role="right"] {
  transform: translate(48%, 10%) rotate(8deg) scale(0.88);
  opacity: 0.9;
  z-index: 1;
}

/* Outgoing card, forward (right-side click): swipes further left and
   fades, as if peeled off the front of the deck. */
.group-popover-layer.is-leaving {
  transform: translate(-180%, 16%) rotate(-16deg) scale(0.78) !important;
  opacity: 0 !important;
  z-index: 4 !important;
}

/* Outgoing card, backward (left-side click): the mirror image of
   is-leaving, peeling off toward the right instead. */
.group-popover-layer.is-leaving-right {
  transform: translate(180%, 16%) rotate(16deg) scale(0.78) !important;
  opacity: 0 !important;
  z-index: 4 !important;
}

/* Recycled card's starting point just before it grows into the new right
   slot (forward), so it eases into view from off to the side instead of
   popping in. */
.group-popover-layer.pre-enter-right {
  transform: translate(186%, 16%) rotate(16deg) scale(0.62) !important;
  opacity: 0 !important;
}

/* Mirror of pre-enter-right, for the new left slot (backward). */
.group-popover-layer.pre-enter-left {
  transform: translate(-186%, 16%) rotate(-16deg) scale(0.62) !important;
  opacity: 0 !important;
}

.group-popover-layer.no-anim {
  transition: none;
}

.group-popover-text {
  transition: opacity 0.2s ease;
}

.group-popover-text.is-fading {
  opacity: 0;
}

.group-popover-count {
  font-size: 13px;
  color: var(--text-tertiary);
  margin: 0 0 8px 0;
}

.group-popover-title {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-primary);
  margin: 0 0 14px 0;
}

.group-popover-cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--border);
}

.group-popover-cta:hover {
  color: var(--link-hover);
  text-decoration-color: var(--link-hover);
}

.group-popover-cta-icon {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  color: inherit;
}