/* ============================================================
   SUNNYRAY: SITE-WIDE POLISH (loads after page-specific CSS)
   Typography rhythm, hero photo, surfaces, motion, dark noir.
   ============================================================ */

:root {
  --radius-card: 12px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-8: 48px;
}

/* ----- Hero: editorial photo + calmer layout ----- */
.hero-primary {
  min-width: 0;
}

.hero-visual {
  display: none;
  position: relative;
  align-self: stretch;
  min-width: 0;
}

section.hero[data-hero="editorial"] .hero-visual {
  display: block;
}

.hero-photo {
  position: relative;
  width: 100%;
  min-width: 0;
  z-index: 0;
}

.hero-visual-glow {
  pointer-events: none;
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at 50% 45%,
    color-mix(in oklch, var(--sun) 32%, transparent),
    transparent 70%
  );
  filter: blur(30px);
  opacity: 0.4;
  z-index: 0;
}

.hero-figure .hero-carousel-viewport {
  border-radius: 18px;
  overflow: hidden;
}

/* photos in full color (grayscale retired 2026-07-19) */
.hero-carousel-layer img {
  filter: none;
  transition: transform .6s cubic-bezier(.2,.8,.2,1);
}
/* hover delight: gentle lift, tilt, warm glow ring */
.hero-figure { transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s ease; }
.hero-figure:hover {
  transform: translateY(-6px) rotate(-1.2deg) scale(1.015);
  box-shadow: 0 22px 60px rgba(247,147,26,.28), 0 6px 18px rgba(20,16,10,.18);
}
.hero-figure:hover .hero-carousel-layer img { transform: scale(1.045); }
.hero-figure::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 0 rgba(247,147,26,0); transition: box-shadow .5s ease;
}
.hero-figure:hover::after { box-shadow: inset 0 0 0 3px rgba(247,147,26,.55); }
@media (prefers-reduced-motion: reduce) {
  .hero-figure, .hero-carousel-layer img { transition: none; }
  .hero-figure:hover { transform: none; }
}

.hero-figure {
  position: relative;
  z-index: 1;
  isolation: isolate;
  margin: 0;
  border-radius: var(--radius-card);
  overflow: hidden;
  border: none;
  background: transparent;
  box-shadow: none;
  aspect-ratio: 1;
}

.hero-carousel-viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hero-carousel-layer {
  position: absolute;
  inset: 0;
  transform: translateX(100%);
  z-index: 1;
  will-change: transform;
  transition: transform 0.75s cubic-bezier(0.32, 0.72, 0, 1);
}

.hero-carousel-layer--front {
  transform: translateX(0);
  z-index: 2;
}

.hero-carousel-layer--back {
  transform: translateX(100%);
  z-index: 1;
}

.hero-carousel-layer.is-sliding-out {
  transform: translateX(-100%);
}

.hero-carousel-layer.is-sliding-in {
  transform: translateX(0);
  z-index: 3;
}

.hero-carousel-layer.hero-carousel-layer--instant {
  transition: none !important;
}

.hero-figure .hero-carousel-layer img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center center;
  display: block;
}

section.hero[data-hero="editorial"] .hero-display {
  grid-template-columns: 1fr minmax(200px, 32vw);
  gap: clamp(var(--space-5), 4vw, var(--space-8));
  align-items: center;
}

/* Editorial + photo: headline scales to the narrower text column */
section.hero[data-hero="editorial"] .hero-title {
  font-size: clamp(2.35rem, 4.8vw, 5.25rem);
  line-height: 0.9;
  letter-spacing: -0.032em;
  margin-bottom: 0.22em;
}

section.hero[data-hero="editorial"] .hero-title .stroke {
  -webkit-text-stroke-width: 1.25px;
}

section.hero[data-hero="editorial"] .hero-sub {
  margin-top: 28px;
  grid-template-columns: 1fr;
  gap: 22px;
  align-items: start;
}

@media (max-width: 900px) {
  section.hero[data-hero="editorial"] .hero-display {
    grid-template-columns: 1fr;
  }

  section.hero[data-hero="editorial"] .hero-visual {
    width: 100%;
    max-width: min(100%, 420px);
    justify-self: start;
    order: -1;
    margin-bottom: var(--space-5);
  }
  @media (max-width: 720px) {
    section.hero[data-hero="editorial"] .hero-visual { order: 2; margin-top: max(48px, calc(100vh - 620px)); margin-bottom: 0; }
    section.hero[data-hero="editorial"] .hero-title { margin-top: 64px; }
  }

  /* Full-width column: allow headline to breathe again */
  section.hero[data-hero="editorial"] .hero-title {
    font-size: clamp(2.75rem, 9vw, 4.25rem);
  }
}

/* Softer grain (base opacity set in system.css) */
.grain {
  opacity: 0.14;
}

/* ----- Homepage: post grid as unified cards ----- */
.content-sec .posts {
  gap: 1px;
  background: var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--line);
}

.content-sec .post {
  border-right: none;
  border-bottom: none;
  padding: var(--space-5) var(--space-6);
  background: var(--paper);
  transition: background 0.25s ease, box-shadow 0.25s ease;
}

.content-sec .post:nth-child(3n) {
  padding-right: var(--space-6);
}

.content-sec .post:hover {
  background: var(--paper-2);
  padding-left: var(--space-6);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

/* ----- Link hub: chip-like surfaces ----- */
.hub-a {
  border-radius: var(--radius-card);
  border-color: var(--line);
  background: color-mix(in oklch, var(--paper-2) 88%, transparent);
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.hub-a:hover {
  background: var(--paper);
  border-color: var(--line-strong);
  transform: translateY(-1px);
}

/* ----- Blog index: align with card language ----- */
.blog-list {
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--line);
}

.blog-list a {
  padding: var(--space-5) var(--space-4);
  margin: 0;
  border-bottom-color: var(--line);
  background: var(--paper);
}

.blog-list a:last-child {
  border-bottom: none;
}

.blog-list a:hover {
  padding-left: var(--space-5);
  padding-right: var(--space-5);
  background: var(--paper-2);
}

/* ----- Motion: respect user preference ----- */
@media (prefers-reduced-motion: reduce) {
  .logo-mark::after {
    animation: none;
  }

  .hero-arrow {
    animation: none;
  }

  .btn,
  .btn .arrow,
  .channel,
  .hub-a,
  .twin-send {
    transition-duration: 0.01ms !important;
  }

  .btn:hover,
  .channel:hover,
  .hub-a:hover,
  .twin-send:hover:not(:disabled) {
    transform: none;
  }

  .hero-visual-glow {
    opacity: 0.2;
  }

  .hero-carousel-layer {
    transition-duration: 0.01ms;
  }

  .twin-typing span {
    animation: none !important;
  }
}