/* ============================================================
   IMMERSIVE SKIN — Photo Detail Page
   Unified editorial layout: refined hero, cohesive content flow
   ============================================================ */

/* --- Hero — refined dark, tighter --- */
body[data-skin="immersive"] .ph-hero {
  background: var(--hero-bg);
  min-height: 55vh;
  padding: 1.5rem 1.5rem 2rem;
}
body[data-skin="immersive"] .ph-hero::after {
  background: var(--c-accent);
  opacity: 0.04;
}

/* Breadcrumb */
body[data-skin="immersive"] .ph-breadcrumb a {
  color: var(--hero-muted);
  font-family: var(--font-main);
}
body[data-skin="immersive"] .ph-breadcrumb a:hover {
  color: var(--hero-text);
}
body[data-skin="immersive"] .ph-breadcrumb-current {
  color: rgba(250,249,247,0.7);
}

/* Image — white frame = premium editorial look */
body[data-skin="immersive"] .ph-img {
  border: 12px solid #fff;
  border-radius: 2px;
  box-shadow: var(--shadow-photo);
}

/* Title in hero */
body[data-skin="immersive"] .ph-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
  color: rgba(250,249,247,0.6);
  letter-spacing: 0.01em;
}

/* Share buttons */
body[data-skin="immersive"] .ph-share-btn {
  background: rgba(250,249,247,0.08);
  border-color: rgba(250,249,247,0.1);
  color: rgba(250,249,247,0.6);
}
body[data-skin="immersive"] .ph-share-btn:hover {
  background: rgba(250,249,247,0.15);
  color: var(--hero-text);
}

/* Zoom button */
body[data-skin="immersive"] .ph-zoom {
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: var(--font-main);
}

/* --- Body area — warm editorial --- */
body[data-skin="immersive"] .ph-body {
  max-width: 940px;
  padding: 2.5rem 1.5rem 3.5rem;
  background: var(--c-bg);
}

/* Story teaser pill */
body[data-skin="immersive"] .ph-story {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  color: var(--c-text);
  font-family: var(--font-main);
}
body[data-skin="immersive"] .ph-story:hover {
  border-color: var(--c-accent);
  box-shadow: var(--shadow-sm);
  color: var(--c-accent);
}

/* --- Tags — consistent with design system --- */
body[data-skin="immersive"] .ph-tag {
  background: var(--c-bg);
  color: var(--c-text-muted);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-pill);
  font-family: var(--font-main);
  font-size: 0.78rem;
  font-weight: 500;
  transition: all var(--duration-fast) ease;
}
body[data-skin="immersive"] .ph-tag:hover {
  background: var(--c-primary);
  color: #fff;
  border-color: var(--c-primary);
}

/* --- Specs row — clean white card --- */
body[data-skin="immersive"] .ph-specs {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
}
body[data-skin="immersive"] .ph-spec {
  border-left-color: var(--c-border);
}
body[data-skin="immersive"] .ph-spec-label {
  color: var(--c-text-dim);
  font-family: var(--font-main);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
}
body[data-skin="immersive"] .ph-spec-val {
  color: var(--c-text);
  font-family: var(--font-main);
  font-weight: 700;
}

/* --- Downloads — clean card matching specs --- */
body[data-skin="immersive"] .ph-downloads {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
}
body[data-skin="immersive"] .ph-dl-btn {
  border: 1.5px solid var(--c-border);
  background: var(--c-surface);
  color: var(--c-text);
  font-family: var(--font-main);
  border-radius: var(--radius-pill);
  transition: all var(--duration-fast) ease;
}
body[data-skin="immersive"] .ph-dl-btn:hover {
  border-color: var(--c-success);
  color: var(--c-success);
  box-shadow: var(--shadow-sm);
}
body[data-skin="immersive"] .ph-dl-btn--primary {
  background: var(--c-success);
  color: #fff;
  border-color: var(--c-success);
}
body[data-skin="immersive"] .ph-dl-btn--primary:hover {
  background: #15803d;
  border-color: #15803d;
  color: #fff;
}

/* --- License block — unified card --- */
body[data-skin="immersive"] .ph-license-block {
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  background: var(--c-surface);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}
body[data-skin="immersive"] .ph-license-text {
  color: var(--c-text-muted);
}
body[data-skin="immersive"] .ph-license-credit {
  background: var(--c-bg);
  border-top-color: var(--c-border);
}
body[data-skin="immersive"] .ph-license-credit:hover {
  background: var(--c-surface-hover);
}
body[data-skin="immersive"] .ph-license-credit code {
  color: var(--c-text);
  font-size: 0.82rem;
}
body[data-skin="immersive"] .ph-license-credit-label {
  color: var(--c-text-muted);
}
body[data-skin="immersive"] .ph-license-credit-copy {
  color: var(--c-primary);
}
body[data-skin="immersive"] .ph-license-link {
  background: var(--c-bg);
  border-top-color: var(--c-border);
  color: var(--c-primary);
  font-family: var(--font-main);
}
body[data-skin="immersive"] .ph-license-link:hover {
  background: var(--c-surface-hover);
}

/* Warning notices */
body[data-skin="immersive"] .ph-license-warning {
  background: #fef2f2;
  border-top-color: var(--c-danger);
}
body[data-skin="immersive"] .ph-download-notice {
  font-family: var(--font-main);
}
body[data-skin="immersive"] .ph-private-notice {
  font-family: var(--font-main);
}
body[data-skin="immersive"] .ph-viewonly-notice {
  font-family: var(--font-main);
}

/* --- Palette + Rating (duo) — unified cards --- */
body[data-skin="immersive"] .ph-duo-section {
  padding: 1.5rem 1.75rem;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  background: var(--c-surface);
  box-shadow: var(--shadow-xs);
}
body[data-skin="immersive"] .ph-duo-label {
  color: var(--c-text-dim);
  font-family: var(--font-main);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  font-weight: 700;
}
body[data-skin="immersive"] .ph-swatch-tip {
  background: var(--c-primary);
  font-family: var(--font-main);
}
body[data-skin="immersive"] .ph-swatch-tip::after {
  border-top-color: var(--c-primary);
}

/* Rating */
body[data-skin="immersive"] .ph-rating-score {
  color: var(--c-text);
  font-family: var(--font-display);
}
body[data-skin="immersive"] .ph-rating-meta {
  color: var(--c-text-muted);
  font-family: var(--font-main);
}
body[data-skin="immersive"] .ph-star-empty {
  fill: var(--c-border-strong);
}
body[data-skin="immersive"] .ph-voted {
  background: #f0fdf4;
  color: #166534;
  border-color: #bbf7d0;
  font-family: var(--font-main);
}
body[data-skin="immersive"] .ph-rate-label {
  color: var(--c-text-muted);
  font-family: var(--font-main);
}

/* Divider */
body[data-skin="immersive"] .ph-divider {
  border-top-color: var(--c-border);
}

/* --- Comments — unified card --- */
body[data-skin="immersive"] .ph-comments {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
}
body[data-skin="immersive"] .ph-cm-title {
  color: var(--c-text);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
}
body[data-skin="immersive"] .ph-comment {
  background: var(--c-bg);
  border-radius: var(--radius-sm);
}
body[data-skin="immersive"] .ph-comment-name {
  color: var(--c-text);
  font-family: var(--font-main);
}
body[data-skin="immersive"] .ph-comment-date {
  color: var(--c-text-dim);
}
body[data-skin="immersive"] .ph-comment-text {
  color: var(--c-text-muted);
  font-family: var(--font-main);
}
body[data-skin="immersive"] .ph-no-comments {
  color: var(--c-text-dim);
  font-family: var(--font-main);
}

/* Comment form */
body[data-skin="immersive"] .ph-cf input[type="text"],
body[data-skin="immersive"] .ph-cf textarea {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  color: var(--c-text);
  font-family: var(--font-main);
  border-radius: var(--radius-sm);
  transition: border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}
body[data-skin="immersive"] .ph-cf input:focus,
body[data-skin="immersive"] .ph-cf textarea:focus {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px rgba(194,112,62,0.1);
}
body[data-skin="immersive"] .ph-cf-submit {
  background: var(--c-primary);
  color: #fff;
  border-radius: var(--radius-sm);
  font-family: var(--font-main);
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: background var(--duration-fast) ease;
}
body[data-skin="immersive"] .ph-cf-submit:hover {
  background: var(--c-primary-hover);
}

/* CAPTCHA */
body[data-skin="immersive"] .ph-captcha img {
  border-color: var(--c-border);
}
body[data-skin="immersive"] .ph-captcha input {
  background: var(--c-bg);
  border-color: var(--c-border);
  color: var(--c-text);
}
body[data-skin="immersive"] .ph-captcha input:focus {
  border-color: var(--c-accent);
}

/* Comment toggle (mobile) */
body[data-skin="immersive"] .ph-cm-toggle {
  background: var(--c-bg);
  border-color: var(--c-border);
  color: var(--c-text);
  font-family: var(--font-main);
}

/* Alerts */
body[data-skin="immersive"] .ph-alert--ok {
  font-family: var(--font-main);
}
body[data-skin="immersive"] .ph-alert--err {
  font-family: var(--font-main);
}

/* Admin edit link */
body[data-skin="immersive"] .ph-admin a {
  color: var(--c-accent);
  font-family: var(--font-main);
}

/* Mobile bar */
body[data-skin="immersive"] .ph-mob-bar {
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top-color: var(--c-border);
}
body[data-skin="immersive"] .ph-mob-btn {
  color: var(--c-text);
  font-family: var(--font-main);
}

/* Related photos heading */
body[data-skin="immersive"] .ph-related-title {
  color: var(--c-text);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* --- Responsive --- */
@media (max-width: 768px) {
  body[data-skin="immersive"] .ph-img {
    border-width: 6px;
  }
  body[data-skin="immersive"] .ph-body {
    padding: 1.5rem 1rem 5rem;
  }
  body[data-skin="immersive"] .ph-spec {
    border-left: none;
    border-bottom-color: var(--c-border);
  }
}