/*
 * ARALIYA V3 Template Styles
 *
 * Shared styles for all archive and collection templates.
 * All colours reference --ar-color-* custom properties set by
 * DesignPresets.php (ARALIYA Platform Core, priority 101).
 * Switching a preset in WP Admin → ARALIYA → Design Manager
 * instantly updates every page that uses these classes.
 *
 * Colour mapping:
 *   --ar-color-bg          Page / section background
 *   --ar-color-bg-soft     Subtle variant (CTA, fallback card)
 *   --ar-color-bg-dark     High-contrast dark section (CTA band)
 *   --ar-color-card-bg     Tile / card background
 *   --ar-color-card-border Card border (rgba)
 *   --ar-color-text        Primary text
 *   --ar-color-text-light  Light text on dark backgrounds
 *   --ar-color-muted       Secondary / muted text
 *   --ar-color-secondary   Gold accent
 *   --ar-color-btn-bg      CTA button fill
 *   --ar-color-btn-text    CTA button label
 *   --ar-color-btn-hover   CTA button hover fill
 *   --ar-color-divider     Subtle border / line (rgba)
 *
 * @package   AraliyaPlatformCore
 * @since     2.0.0-alpha.92
 */

/* ── Hero ─────────────────────────────────────────────────────────────── */
/*
 * LIGHT-FIRST seit alpha.116:
 * Fallback-Farben entsprechen dem araliya-light Preset (creme/hell).
 * Dunkle Presets überschreiben automatisch via --ar-color-* Tokens.
 * Kein hardcodierter dunkler Block mehr.
 */
.v3-hero {
  background: var(--ar-color-bg-soft, #fbfaf6);
  border-top: 3px solid var(--ar-color-primary, #34483a);
  padding: 80px 0 64px;
}

/* ── Label bar ───────────────────────────────────────────────────────── */
.v3-label-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}
.v3-label-line {
  display: inline-block;
  width: 32px;
  height: 1px;
  background: var(--ar-color-primary, #34483a);
  flex-shrink: 0;
  opacity: 0.35;
}
.v3-label {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  color: var(--ar-color-primary, #34483a);
  letter-spacing: 2px;
  opacity: 0.75;
}

/* ── Hero headings ───────────────────────────────────────────────────── */
.v3-h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 300;
  color: var(--ar-color-text, #263126);
  margin: 0 0 20px;
}
.v3-sub {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  color: var(--ar-color-muted, #7a8177);
  max-width: 480px;
  line-height: 1.7;
  margin: 0;
}

/* ── Grid wrapper ────────────────────────────────────────────────────── */
.v3-grid-wrap {
  background: var(--ar-color-bg, #f7f4ee);
  padding: 40px 0 96px;
  border-top: 1px solid var(--ar-color-divider, rgba(52,72,58,.10));
}
.v3-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
}

/* ── Tile card ───────────────────────────────────────────────────────── */
.v3-tile {
  background: var(--ar-color-card-bg, #ffffff);
  border: 1px solid var(--ar-color-card-border, rgba(52,72,58,.10));
  box-shadow: 0 2px 12px rgba(52,72,58,.06);
  display: block;
  text-decoration: none;
  position: relative;
  transition: border-color var(--ar-transition-base, 0.25s ease),
              box-shadow var(--ar-transition-base, 0.25s ease),
              transform var(--ar-transition-base, 0.25s ease);
}
.v3-tile:hover {
  border-color: var(--ar-color-secondary, #b89a62);
  box-shadow: 0 8px 32px rgba(52,72,58,.12);
  transform: translateY(-2px);
}

/* ── Tile image ──────────────────────────────────────────────────────── */
.v3-tile-img-wrap {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.v3-tile-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--ar-transition-slow, 0.40s ease);
}
.v3-tile:hover .v3-tile-img-wrap img {
  transform: scale(1.04);
}
.v3-tile-img-line {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  background: var(--ar-color-secondary, #C5B38D);
  width: 0;
  transition: width 600ms;
}
.v3-tile:hover .v3-tile-img-line {
  width: 100%;
}

/* ── Tile fallback (no image) ────────────────────────────────────────── */
.v3-tile-fallback {
  background: var(--ar-color-bg-soft, #f5f2ec);
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.v3-tile-fallback svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ── Section-specific placeholder backgrounds ───────────────────────── */
/* Light-first Fallbacks — gedämpfte, creme-nahe Töne je Bereich.
   Werden durch echte Fotos ersetzt. Dunkle Presets können per
   CSS-Variable überschreiben. */
.v3-tile-fallback--treeroom  { background: linear-gradient(165deg, #e8ede9 0%, #d4e0d7 100%); }
.v3-tile-fallback--suite     { background: linear-gradient(135deg, #f0ece4 0%, #e4ddd2 100%); }
.v3-tile-fallback--apartment { background: linear-gradient(155deg, #e8ecf0 0%, #dce3ea 100%); }
.v3-tile-fallback--goheal    { background: linear-gradient(160deg, #e4edf0 0%, #d8e8ed 100%); }
.v3-tile-fallback--therapist { background: linear-gradient(140deg, #f0ebe6 0%, #e8e0d8 100%); }
.v3-tile-fallback--cooking   { background: linear-gradient(135deg, #f2ede4 0%, #eae4d6 100%); }
.v3-tile-fallback--team      { background: linear-gradient(145deg, #ede8e0 0%, #e4ddd0 100%); }

/* ── Tile body ───────────────────────────────────────────────────────── */
.v3-tile-body {
  padding: 24px;
}
.v3-tile-label {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  text-transform: uppercase;
  color: var(--ar-color-secondary, #C5B38D);
  letter-spacing: 2px;
  margin-bottom: 8px;
}
.v3-tile-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 24px;
  color: var(--ar-color-text, #263126);
  font-weight: 400;
  margin: 8px 0;
}
.v3-tile-excerpt {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--ar-color-muted, #7a8177);
  line-height: 1.7;
  margin-bottom: 16px;
}
.v3-tile-meta {
  font-size: 12px;
  color: color-mix(in srgb, var(--ar-color-secondary, #C5B38D) 60%, transparent);
  margin-bottom: 12px;
}
.v3-tile-arrow {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  text-transform: uppercase;
  color: var(--ar-color-secondary, #C5B38D);
  letter-spacing: 1px;
}

/* ── CTA band ────────────────────────────────────────────────────────── */
.v3-cta {
  background: var(--ar-color-bg-dark, #1E2A24);
  text-align: center;
  padding: 96px 40px;
}
.v3-cta-line {
  width: 60px;
  height: 1px;
  background: color-mix(in srgb, var(--ar-color-secondary, #C5B38D) 30%, transparent);
  margin: 0 auto 32px;
}
.v3-cta-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 36px;
  color: var(--ar-color-text-light, #F4F2EC);
  font-weight: 400;
  margin-bottom: 16px;
}
.v3-cta-sub {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  color: var(--ar-color-muted, #C8C4BA);
  margin-bottom: 36px;
}

/* ── CTA Button ──────────────────────────────────────────────────────── */
.v3-btn {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  padding: 14px 32px;
  background: var(--ar-color-btn-bg, #C5B38D);
  color: var(--ar-color-btn-text, #ffffff);
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background var(--ar-transition-fast, 0.15s ease);
}
.v3-btn:hover {
  background: var(--ar-color-btn-hover, #a08855);
}

/* ── Therapist avatar ────────────────────────────────────────────────── */
.v3-tile-avatar {
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--ar-color-bg-soft, #1E2A24);
  display: flex;
  align-items: center;
  justify-content: center;
}
.v3-tile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Empty state ─────────────────────────────────────────────────────── */
.v3-empty {
  text-align: center;
  padding: 120px 40px;
  color: var(--ar-color-muted, #C8C4BA);
  font-family: 'Inter', sans-serif;
  font-size: 15px;
}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .v3-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .v3-grid {
    grid-template-columns: 1fr;
    padding: 0 20px;
  }
  .v3-hero {
    padding: 72px 20px 48px;
  }
  .v3-cta {
    padding: 72px 20px;
  }
}

/* ── Footer V3 (Theme 1.0.105 / alpha.105) ──────────────────────────────────
   Nur Design-Manager-Tokens — Dark Mode via body.ary-mode-dark-Remaps. */
.v3-footer {
  background: var(--footer-bg, var(--ar-color-bg-dark, #1c1a16));
  color: var(--footer-text, rgba(255, 255, 255, 0.55));
  font-family: var(--ary-font-body, 'Inter', system-ui, sans-serif);
}
.v3-footer-grid {
  max-width: 1280px;
  margin: 0 auto;
  padding: 72px 40px 56px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 48px;
}
.v3-footer-wordmark {
  font-family: var(--ary-font-display, 'Cormorant Garamond', Georgia, serif);
  font-size: 32px;
  font-weight: 400;
  letter-spacing: 0.22em;
  color: var(--ar-color-secondary, #C5B38D);
  text-decoration: none;
}
.v3-footer-logo img {
  max-height: var(--footer-logo-height, 40px);
  width: auto;
}
.v3-footer-tagline {
  margin-top: 16px;
  max-width: 340px;
  font-family: var(--ary-font-display, 'Cormorant Garamond', Georgia, serif);
  font-size: 19px;
  font-style: italic;
  line-height: 1.55;
  color: var(--footer-text, rgba(255, 255, 255, 0.55));
}
.v3-footer-heading {
  margin: 0 0 18px;
  font-family: var(--ary-font-body, 'Inter', system-ui, sans-serif);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ar-color-secondary, #C5B38D);
}
.v3-footer-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.v3-footer-nav li + li {
  margin-top: 10px;
}
.v3-footer a {
  color: var(--footer-text, rgba(255, 255, 255, 0.55));
  text-decoration: none;
  transition: color var(--ary-transition-fast, 150ms ease);
}
.v3-footer a:hover {
  color: var(--ar-color-secondary, #C5B38D);
}
.v3-footer-contact p {
  margin: 0 0 10px;
}
.v3-footer-bar {
  border-top: 1px solid var(--ar-color-divider, rgba(255, 255, 255, 0.12));
  max-width: 1280px;
  margin: 0 auto;
  padding: 22px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13px;
}
.v3-footer-bar-links a + a {
  margin-left: 20px;
}
@media (max-width: 900px) {
  .v3-footer-grid {
    grid-template-columns: 1fr 1fr;
    padding: 56px 24px 40px;
  }
}
@media (max-width: 600px) {
  .v3-footer-grid {
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 48px 20px 32px;
  }
  .v3-footer-bar {
    flex-direction: column;
    align-items: flex-start;
    padding: 18px 20px;
  }
}