/* ==========================================================================
   Griot Fables  -  Theme Enhancements Stylesheet
   Covers: Featured Work, Services Grid, Post Video Header, Back Button,
           Parallax Sections
   ========================================================================== */

/* --------------------------------------------------------------------------
   CSS Custom Properties
   -------------------------------------------------------------------------- */

:root {
  --gf-accent:       #c9a96e;
  --gf-accent-dark:  #a07840;
  --gf-text-light:   #f5f0e8;
  --gf-card-radius:  6px;
  --gf-transition:   0.3s ease;
  --gf-font-heading: 'Georgia', serif;
  --gf-font-body:    system-ui, -apple-system, sans-serif;
}

/* --------------------------------------------------------------------------
   1. PARALLAX SECTIONS
   -------------------------------------------------------------------------- */

.parallax-section {
  position:        relative;
  overflow:        hidden;
  display:         flex;
  align-items:     center;
  justify-content: center;
}

/* Non-hero sections need a minimum height so they don't collapse
   before a Customizer background image is assigned. */
.section-about,
.section-services,
.section-cta {
  min-height: 60vh;
}

/* --------------------------------------------------------------------------
   Shared layer rules for bg, video-wrap, and overlay.

   IMPORTANT - uses explicit top/left/right/bottom NOT width/height.
   Using `inset:-15%` then `width:100%` causes the background to end at
   85% of the parent, creating a black strip on the right side.
   Using left:0; right:0; top:-20%; bottom:-20% gives full width and
   extra vertical bleed for parallax movement without any horizontal gap.
   -------------------------------------------------------------------------- */

.parallax-section__bg,
.parallax-section__video-wrap,
.parallax-section__overlay {
  position:       absolute;
  top:            -20%;
  left:           0;
  right:          0;
  bottom:         -20%;
  z-index:        0;
  pointer-events: none;
}

.parallax-section__bg {
  background-size:     cover;
  background-position: center center;
  background-repeat:   no-repeat;
  will-change:         transform;
  transition:          opacity var(--gf-transition);
}

.parallax-section__video-wrap {
  transition: opacity var(--gf-transition);
}

.parallax-section__video {
  position:    absolute;
  top:         0;
  left:        0;
  right:       0;
  bottom:      0;
  width:       100%;
  height:      100%;
  object-fit:  cover;
  will-change: transform;
}

.parallax-section__overlay {
  background: #000;
  z-index:    1;
  top:        0;
  left:       0;
  right:      0;
  bottom:     0;
}

.parallax-section__content {
  position: relative;
  z-index:  2;
  width:    100%;
}

@media (prefers-reduced-motion: reduce) {
  .parallax-section__bg,
  .parallax-section__video {
    will-change: auto;
    transform:   none !important;
  }
}

/* --------------------------------------------------------------------------
   2. HERO LOGO
   -------------------------------------------------------------------------- */

.site-hero__logo {
  display:         flex;
  justify-content: center;
  align-items:     center;
  margin-bottom:   2rem;
}

.site-hero__logo-img {
  max-width:  400px;
  max-height: 400px;
  width:      auto;
  height:     auto;
  object-fit: contain;
}

/* --------------------------------------------------------------------------
   3. POST VIDEO HEADER
   -------------------------------------------------------------------------- */

.post-video-header {
  position:   relative;
  width:      100%;
  min-height: 56.25vw;
  max-height: 90vh;
  overflow:   hidden;
  background: #111;
}

.post-video-header__video {
  position:   absolute;
  top:        0;
  left:       0;
  right:      0;
  bottom:     0;
  width:      100%;
  height:     100%;
  object-fit: cover;
}

.post-video-header__image {
  position:            absolute;
  top:                 0;
  left:                0;
  right:               0;
  bottom:              0;
  background-size:     cover;
  background-position: center;
}

.post-video-header__overlay {
  position:   absolute;
  top:        0;
  left:       0;
  right:      0;
  bottom:     0;
  background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,0.65) 100%);
  z-index:    1;
}

/* --------------------------------------------------------------------------
   4. BACK BUTTON
   -------------------------------------------------------------------------- */

.griot-back-btn-wrap {
  padding: 1.25rem 1.5rem 0;
}

.griot-back-btn {
  display:         inline-flex;
  align-items:     center;
  gap:             0.4em;
  text-decoration: none;
  color:           var(--gf-accent);
  font-family:     var(--gf-font-body);
  font-size:       0.875rem;
  font-weight:     600;
  letter-spacing:  0.04em;
  text-transform:  uppercase;
  border:          2px solid transparent;
  border-radius:   4px;
  padding:         0.35em 0.75em 0.35em 0.5em;
  background:      transparent;
  cursor:          pointer;
  transition:      color var(--gf-transition), background var(--gf-transition),
                   border-color var(--gf-transition), transform var(--gf-transition);
  opacity:         0;
  transform:       translateX(-8px);
}

.griot-back-btn--ready {
  opacity:    1;
  transform:  translateX(0);
  transition: color var(--gf-transition), background var(--gf-transition),
              border-color var(--gf-transition), opacity 0.4s ease, transform 0.4s ease;
}

.griot-back-btn:hover,
.griot-back-btn:focus-visible {
  color:        var(--gf-text-light);
  background:   var(--gf-accent);
  border-color: var(--gf-accent);
  outline:      none;
}

.griot-back-btn__icon {
  display:     flex;
  align-items: center;
  flex-shrink: 0;
  transition:  transform var(--gf-transition);
}

.griot-back-btn:hover .griot-back-btn__icon,
.griot-back-btn:focus-visible .griot-back-btn__icon {
  transform: translateX(-3px);
}

/* --------------------------------------------------------------------------
   5. FEATURED WORK SECTION
   -------------------------------------------------------------------------- */

.featured-work {
  padding:    4rem 1.5rem;
  background: #0e0e0e;
}

.featured-work__inner {
  max-width: 1200px;
  margin:    0 auto;
}

/* --------------------------------------------------------------------------
   Section heading  -  shared between Featured Work and Services.
   .services-grid__header and .services-grid__heading are aliased to the
   same rules so both sections look identical.
   -------------------------------------------------------------------------- */

.featured-work__header,
.services-grid__header {
  margin-bottom: 2.5rem;
  text-align:    center;
}

.featured-work__heading,
.services-grid__heading {
  font-family:    var(--gf-font-heading);
  font-size:      clamp(1.75rem, 4vw, 2.75rem);
  color:          var(--gf-text-light);
  letter-spacing: 0.02em;
  margin:         0;
}

/* Gold underline accent bar */
.featured-work__heading::after,
.services-grid__heading::after {
  content:       '';
  display:       block;
  width:         3rem;
  height:        3px;
  background:    var(--gf-accent);
  margin:        0.6rem auto 0;
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   Card grid  -  shared between Featured Work and Services.
   .services-grid__cards is aliased to the same grid as .featured-work__grid.
   -------------------------------------------------------------------------- */

.featured-work__grid,
.services-grid__cards {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap:                   1.5rem;
}

/* --------------------------------------------------------------------------
   Cards  -  .featured-work__card is used by BOTH sections.
   No extra selectors needed  -  content-services.php already applies
   the featured-work__card class to each article element.
   -------------------------------------------------------------------------- */

.featured-work__card {
  border-radius: var(--gf-card-radius);
  overflow:      hidden;
  background:    #1a1a1a;
  list-style:    none;
  transition:    transform var(--gf-transition), box-shadow var(--gf-transition);
}

.featured-work__card:hover {
  transform:  translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.5);
}

.featured-work__card-link {
  display:         block;
  text-decoration: none;
  color:           inherit;
  height:          100%;
}

/* Thumbnail */
.featured-work__card-thumb {
  position:            relative;
  padding-top:         60%;
  background-color:    #222;
  background-size:     cover;
  background-position: center;
  overflow:            hidden;
}

.featured-work__card-thumb--placeholder {
  position:   absolute;
  top:        0;
  left:       0;
  right:      0;
  bottom:     0;
  background: linear-gradient(135deg, #1e1e1e 0%, #2e2e2e 100%);
}

.featured-work__card-thumb-overlay {
  position:   absolute;
  top:        0;
  left:       0;
  right:      0;
  bottom:     0;
  background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 60%);
  transition: opacity var(--gf-transition);
}

.featured-work__card:hover .featured-work__card-thumb-overlay {
  opacity: 0.7;
}

/* Video badge */
.featured-work__video-badge {
  position:       absolute;
  top:            50%;
  left:           50%;
  transform:      translate(-50%, -50%);
  z-index:        2;
  opacity:        0.85;
  transition:     opacity var(--gf-transition), transform var(--gf-transition);
  pointer-events: none;
}

.featured-work__card:hover .featured-work__video-badge {
  opacity:   1;
  transform: translate(-50%, -50%) scale(1.15);
}

/* Card body */
.featured-work__card-body {
  padding: 1.25rem;
}

.featured-work__card-cat {
  display:        inline-block;
  font-size:      0.7rem;
  font-weight:    700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--gf-accent);
  margin-bottom:  0.4rem;
}

.featured-work__card-title {
  font-family: var(--gf-font-heading);
  font-size:   1.15rem;
  color:       var(--gf-text-light);
  margin:      0 0 0.5rem;
  line-height: 1.3;
}

.featured-work__card-excerpt {
  font-size:   0.875rem;
  color:       #aaa;
  margin:      0 0 1rem;
  line-height: 1.55;
}

.featured-work__card-cta {
  display:        inline-flex;
  align-items:    center;
  gap:            0.3em;
  font-size:      0.8rem;
  font-weight:    700;
  color:          var(--gf-accent);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition:     gap var(--gf-transition), color var(--gf-transition);
}

.featured-work__card:hover .featured-work__card-cta {
  gap:   0.55em;
  color: var(--gf-accent-dark);
}

/* --------------------------------------------------------------------------
   Services grid wrapper  -  mirrors .featured-work exactly
   -------------------------------------------------------------------------- */

.services-grid {
  padding: 2rem 0;
}

.services-grid--empty {
  text-align: center;
  padding:    2rem 0;
}

.services-grid__placeholder {
  color:      #888;
  font-size:  0.9rem;
  margin-top: 1rem;
}

/* --------------------------------------------------------------------------
   6. RESPONSIVE TWEAKS
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
  .featured-work {
    padding: 2.5rem 1rem;
  }

  .featured-work__grid,
  .services-grid__cards {
    grid-template-columns: 1fr;
  }

  .post-video-header {
    min-height: 56vw;
    max-height: 70vw;
  }

  .site-hero__logo-img {
    max-width: 260px;
  }
}