.home-photo-card { margin-bottom: 24px; padding: 24px; border: 1px solid rgba(168,85,247,.14); border-radius: 20px; background: rgba(35,20,43,.38); backdrop-filter: blur(10px) saturate(1.25); -webkit-backdrop-filter: blur(10px) saturate(1.25); box-shadow: inset 0 1px 0 rgba(255,255,255,.1),0 12px 32px rgba(0,0,0,.14); }
.home-photo-card[hidden], .home-photo-card [hidden] { display: none !important; }
.home-photo-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.home-photo-header .section-title { margin: 0; }
.home-photo-header > a { color: rgba(255,255,255,.68); font-size: 12px; text-decoration: none; }
.home-photo-stage { position: relative; isolation: isolate; overflow: hidden; aspect-ratio: 16/9; border-radius: 14px; background: rgba(222,184,221,.08); }
.home-photo-backdrop { position: absolute; inset: -18px; width: calc(100% + 36px); height: calc(100% + 36px); object-fit: cover; opacity: .4; filter: blur(18px); pointer-events: none; }
.home-photo-link { display: block; position: absolute; inset: 0; }
.home-photo-image { width: 100%; height: 100%; object-fit: contain; display: block; animation: home-photo-in .35s ease; }
.home-photo-arrow { position: absolute; z-index: 2; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 38px; height: 46px; border: 1px solid rgba(255,255,255,.28); border-radius: 12px; color: #fff; background: rgba(52,34,54,.42); backdrop-filter: blur(8px); cursor: pointer; font: inherit; }
.home-photo-arrow svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2; }
.home-photo-prev { left: 12px; } .home-photo-next { right: 12px; }
.home-photo-arrow:hover, .home-photo-pause:hover { background: rgba(149,93,158,.45); }
.home-photo-card button:focus-visible, .home-photo-card a:focus-visible { outline: 2px solid #efbdff; outline-offset: 3px; }
.home-photo-bottom { display: flex; align-items: center; gap: 14px; margin-top: 16px; }
.home-photo-caption { flex: 1; min-width: 0; }
.home-photo-caption strong { display: block; color: rgba(255,255,255,.93); font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.home-photo-caption small { display: block; color: rgba(255,255,255,.58); font-size: 11px; margin-top: 4px; }
.home-photo-count { color: rgba(255,255,255,.72); font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.home-photo-pause { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.2); border-radius: 10px; background: rgba(255,255,255,.04); color: #f1d9f4; cursor: pointer; }
.home-photo-pause svg { width: 16px; height: 16px; fill: currentColor; }
.home-photo-error { color: #c9b8cc; padding: 28px 0; font-size: 13px; line-height: 1.8; }
.home-photo-retry { border: 1px solid rgba(239,189,255,.3); border-radius: 10px; background: rgba(239,189,255,.08); color: #efbdff; padding: 9px 16px; font: inherit; cursor: pointer; }
@keyframes home-photo-in { from { opacity: .4; } to { opacity: 1; } }
@media (max-width: 640px) { .home-photo-card { padding: 20px 18px; border-radius: 16px; } .home-photo-arrow { width: 30px; height: 38px; border-radius: 9px; } .home-photo-prev { left: 8px; } .home-photo-next { right: 8px; } .home-photo-header > a { font-size: 11px; } .home-photo-caption strong { font-size: 13px; } }
@media (prefers-reduced-motion: reduce) { .home-photo-image { animation: none; } }