/* ===========================================================================
 * Cinematic Social Gallery — Phase 4 Cinematic Stylesheet
 * ===========================================================================
 * Luxury editorial CSS for horizontal scrolling Instagram gallery embed
 * All selectors namespaced under .csg- prefix for embed isolation
 * See: .planning/phases/04-frontend-embed-gallery-css-cinematic-aesthetic/04-RESEARCH.md
 * ========================================================================= */

/* ===========================================================================
 * CSS CUSTOM PROPERTIES — Theming Layer
 * ========================================================================= */
:root {
  /* Stuart Benjamin theme fallback (gallery.js may override at runtime) */
  --csg-color-background: #050505;
  --csg-color-text: #F5EFE3;
  --csg-color-accent: #C8A45D;
  --csg-overlay-bg: rgba(5, 5, 5, 0.85);
  --csg-skeleton-bg: #1a1a1a;
  --csg-skeleton-shimmer: #2a2a2a;
}

/* ===========================================================================
 * GALLERY CONTAINER — Horizontal Scroll Layout
 * ========================================================================= */
.csg-gallery-container {
  /* Flexbox horizontal layout */
  display: flex;
  gap: 16px;

  /* Horizontal scroll with hidden scrollbar */
  overflow-x: auto;
  overflow-y: hidden;

  /* Cross-browser scrollbar hiding (Pattern 4) */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */

  /* Mobile scroll snap (Pattern 5) */
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch; /* iOS momentum scrolling */

  /* Touch gestures */
  touch-action: pan-x; /* Allow only horizontal swipe */

  /* Embed isolation (Pattern 2) */
  contain: layout paint;

  /* Spacing */
  padding: 20px 0;
}

/* Webkit scrollbar hiding (Chrome/Safari) */
.csg-gallery-container::-webkit-scrollbar {
  display: none;
}

/* ===========================================================================
 * TILE — Individual Gallery Item Wrapper
 * ========================================================================= */
.csg-tile {
  /* Fixed aspect ratio (Pattern 3) */
  aspect-ratio: 2 / 3; /* Portrait 400x600 equivalent */

  /* Layout */
  position: relative; /* For absolute-positioned overlay */
  overflow: hidden; /* Clip media overflow */
  flex-shrink: 0; /* Prevent tile compression */

  /* Responsive sizing (Pattern 10) */
  width: 85vw; /* Mobile: shows 1.15 tiles */

  /* Scroll snap alignment */
  scroll-snap-align: start;
  scroll-snap-stop: normal; /* Allow fast scrolling */

  /* Anchor reset */
  display: block;
  text-decoration: none;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  margin: 0;

  /* Transition for hover state (applied in Task 2) */
  transition: transform 0.3s ease;
}

/* Desktop sizing breakpoint */
@media (min-width: 768px) {
  .csg-tile {
    width: 350px; /* Fixed width on desktop (3-4 tiles on 1920px) */
  }
}

/* ===========================================================================
 * MEDIA ELEMENTS — Images and Videos
 * ========================================================================= */
.csg-tile-media {
  /* Fill tile container (Pattern 3) */
  width: 100%;
  height: 100%;

  /* Crop without distortion */
  object-fit: cover;
  object-position: center;

  /* Remove inline spacing */
  display: block;

  /* Prevent drag artifacts */
  user-select: none;
  -webkit-user-drag: none;
}

/* ===========================================================================
 * ERROR STATE
 * ========================================================================= */
.csg-error {
  /* Center error message */
  justify-content: center;
  align-items: center;
  min-height: 400px;
}

.csg-error-message {
  text-align: center;
  padding: 40px;
  color: var(--csg-color-text);
}

.csg-error-message p {
  margin: 0 0 12px 0;
  font-size: 16px;
}

.csg-error-hint {
  font-size: 14px;
  opacity: 0.7;
  color: var(--csg-color-accent);
}

/* ===========================================================================
 * TILE OVERLAY — Hover Interactions (Pattern 6)
 * ========================================================================= */
.csg-tile-overlay {
  /* Positioning */
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;

  /* Spacing */
  padding: 24px;

  /* Gradient background */
  background: linear-gradient(to top, var(--csg-overlay-bg), transparent);

  /* Initial state - hidden (Pattern 6) */
  opacity: 0;

  /* Smooth transitions */
  transition: opacity 0.3s ease;
}

/* Default state for reduced-motion users - no transforms, only opacity */
@media (prefers-reduced-motion: no-preference) {
  .csg-tile-overlay {
    /* Slide-up animation for non-motion-sensitive users (Pattern 8) */
    transform: translateY(20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
}

/* Hover state - only on devices with hover capability (Pattern 6, Open Question 2) */
@media (hover: hover) {
  .csg-tile:hover .csg-tile-overlay {
    opacity: 1;
  }

  /* Apply transform only if reduced-motion is not preferred */
  @media (prefers-reduced-motion: no-preference) {
    .csg-tile:hover .csg-tile-overlay {
      transform: translateY(0);
    }
  }
}

/* Touch devices - overlay always visible (Pattern 6) */
@media (hover: none) {
  .csg-tile-overlay {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Performance hint - only on hover, not permanent (Pattern 6) */
@media (hover: hover) {
  .csg-tile:hover {
    will-change: transform, opacity;
  }
}

/* ===========================================================================
 * OVERLAY TEXT ELEMENTS
 * ========================================================================= */
.csg-tile-title {
  /* Typography */
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--csg-color-text);

  /* Spacing */
  margin: 0 0 8px 0;
}

.csg-tile-caption {
  /* Typography */
  font-size: 14px;
  line-height: 1.5;
  color: var(--csg-color-text);
  opacity: 0.9;

  /* Spacing */
  margin: 0 0 16px 0;
}

.csg-tile-cta {
  /* Typography */
  font-size: 14px;
  font-weight: 500;
  color: var(--csg-color-accent);

  /* Initial state - hidden */
  opacity: 0;

  /* Delayed fade-in (100ms after overlay) */
  transition: opacity 0.3s ease 0.1s;
}

/* CTA hover state - only on hover-capable devices */
@media (hover: hover) {
  .csg-tile:hover .csg-tile-cta {
    opacity: 1;
  }
}

/* Touch devices - CTA always visible */
@media (hover: none) {
  .csg-tile-cta {
    opacity: 1;
  }
}

/* ===========================================================================
 * VIDEO PLAY INDICATOR — Instafeed-style cue (only on video tiles)
 * ========================================================================= */
.csg-tile-play-icon {
  /* Centered absolutely on the tile */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  /* Pill shape */
  width: 56px;
  height: 56px;
  border-radius: 50%;

  /* Glassy dark backdrop so the triangle reads on any thumbnail */
  background: rgba(5, 5, 5, 0.55);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);

  /* Center the SVG */
  display: flex;
  align-items: center;
  justify-content: center;

  /* Above the media but below the hover overlay text */
  z-index: 1;

  /* Don't intercept hover/click — those go to the tile anchor */
  pointer-events: none;

  /* Subtle fade so it doesn't slam in on first paint */
  opacity: 0.95;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.csg-tile-play-icon svg {
  width: 22px;
  height: 22px;
  fill: var(--csg-color-text);
  /* Optical centering: the triangle's visual mass is left of its bounding box */
  margin-left: 3px;
}

/* On desktop hover, fade the play icon out so the playing video is unobscured */
@media (hover: hover) {
  .csg-tile:hover .csg-tile-play-icon {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.85);
  }
}

/* ===========================================================================
 * GALLERY WRAPPER — Positions arrows relative to the scroll track
 * ========================================================================= */
.csg-gallery-wrapper {
  position: relative;
}

/* ===========================================================================
 * SCROLL ARROWS — Left / Right navigation buttons
 * ========================================================================= */
.csg-arrow {
  /* Position over the gallery edges */
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;

  /* Sizing */
  width: 44px;
  height: 44px;
  border-radius: 50%;

  /* Glassy dark style matching tile play icon */
  background: rgba(5, 5, 5, 0.65);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(245, 239, 227, 0.15);

  /* Icon */
  display: flex;
  align-items: center;
  justify-content: center;

  /* Reset button styles */
  cursor: pointer;
  padding: 0;
  outline: none;

  /* Transitions */
  opacity: 0;
  transition: opacity 0.25s ease, background 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}

.csg-arrow svg {
  width: 18px;
  height: 18px;
  fill: var(--csg-color-text);
  flex-shrink: 0;
}

.csg-arrow-prev {
  left: 8px;
}

.csg-arrow-next {
  right: 8px;
}

/* Visible state — controlled by JS via .csg-arrow--visible class */
.csg-arrow--visible {
  opacity: 1;
  pointer-events: auto;
}

/* Hover effect */
@media (hover: hover) {
  .csg-arrow:hover {
    background: rgba(200, 164, 93, 0.25);
    border-color: rgba(200, 164, 93, 0.5);
    transform: translateY(-50%) scale(1.08);
  }
}

/* Hide arrows on touch devices — swiping is natural there */
@media (hover: none) {
  .csg-arrow {
    display: none;
  }
}

/* ===========================================================================
 * LOADING SKELETON ANIMATION (Pattern 7)
 * ========================================================================= */
.csg-skeleton {
  /* Shimmer gradient background */
  background: linear-gradient(
    90deg,
    var(--csg-skeleton-bg) 25%,
    var(--csg-skeleton-shimmer) 50%,
    var(--csg-skeleton-bg) 75%
  );
  background-size: 200% 100%;

  /* Shimmer animation - always enabled (small motion safe for accessibility) */
  animation: csg-shimmer 1.5s infinite linear;
}

/* Shimmer keyframe animation */
@keyframes csg-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}