/*
 * JW Hover Video Gallery — Responsive Grid & Overlay Styles
 *
 * This stylesheet transforms the default WordPress Query Loop list into a
 * responsive portfolio grid that adapts across screen sizes. Each post
 * occupies a 16:9 aspect‑ratio tile with a clean white background.
 * Thumbnails fill their container, and a text overlay fades in on hover.
 *
 * The rules include !important modifiers to ensure they take precedence
 * over theme or Additional CSS declarations when loaded on the front‑end.
 */

/* Responsive grid: 3 columns on wide screens, 2 on medium, 1 on small */
/* Matches Squarespace .videos-grid breakpoints */
ul.wp-block-post-template {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px !important;
  column-gap: 16px !important;
  row-gap: 16px !important;
  padding-left: 0 !important;
  list-style: none !important;
  margin: 0 !important;
}

@media (max-width: 1600px) {
  ul.wp-block-post-template {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 1000px) {
  ul.wp-block-post-template {
    grid-template-columns: 1fr !important;
  }
}

/* When there are only 2 items, use 2 columns on wide screens */
ul.wp-block-post-template:has(> .wp-block-post:first-child:nth-last-child(2)) {
  grid-template-columns: repeat(2, 1fr) !important;
}

/* Each portfolio item: set relative positioning, black background, 16:9 ratio */
.wp-block-post {
  position: relative !important;
  overflow: hidden !important;
  background-color: #000 !important;
  aspect-ratio: 16 / 9 !important;
}

/* Remove any margin between posts */
.wp-block-post:not(:last-child) {
  margin-bottom: 0 !important;
}

/* Ensure figure fills the entire post container */
.wp-block-post figure,
.wp-block-post .wp-block-post-featured-image {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Ensure images and videos completely fill their container */
.wp-block-post img,
.wp-block-post video {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
}

/* Stack the inner columns and allow absolute positioning for the overlay */
.wp-block-post .wp-block-columns {
  display: block !important;
  position: relative !important;
}

/* Reset column widths and padding for all inner columns */
.wp-block-post .wp-block-columns .wp-block-column {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Overlay text (second column): position at bottom, dark backdrop, fade in on hover */
.wp-block-post .wp-block-columns .wp-block-column:nth-child(2) {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  padding: 1rem !important;
  box-sizing: border-box !important;
  background: rgba(0, 0, 0, 0.6) !important;
  color: #ffffff !important;
  opacity: 0 !important;
  transition: opacity 0.3s ease !important;
  z-index: 2 !important;
}

/* Show overlay on hover or keyboard focus */
.wp-block-post:hover .wp-block-columns .wp-block-column:nth-child(2),
.wp-block-post:focus-within .wp-block-columns .wp-block-column:nth-child(2) {
  opacity: 1 !important;
}

/* Space inside overlay headings and paragraphs */
.wp-block-post .wp-block-columns .wp-block-column:nth-child(2) h2,
.wp-block-post .wp-block-columns .wp-block-column:nth-child(2) h3,
.wp-block-post .wp-block-columns .wp-block-column:nth-child(2) p {
  margin: 0 0 0.5rem 0 !important;
  color: inherit !important;
}

/* Remove the default dark overlay pseudo-element */
.wp-block-post::after {
  content: none !important;
}

/* =========================================================================
   JW Film Poster Overlay
   ========================================================================= */

/* Dark overlay that covers the video/image on hover - feathered gradient */
.jw-darken-overlay {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 60%) !important;
  opacity: 0 !important;
  transition: opacity 0.5s cubic-bezier(0.25, 0.1, 0.25, 1) !important;
  z-index: 5 !important;
  pointer-events: none !important;
}

/* Film poster overlay container - bottom third */
.jw-poster-overlay {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  color: #fff !important;
  opacity: 1 !important;
  z-index: 10 !important;
  pointer-events: none !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  align-items: center !important;
  text-align: center !important;
  gap: 8px !important;
  padding-bottom: 4% !important;
  box-sizing: border-box !important;
}

/* Title - very large, bold, uppercase */
.jw-poster-title {
  font-size: 2rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: normal !important;
  line-height: 1 !important;
  opacity: 0 !important;
  transition: opacity 0.5s cubic-bezier(0.25, 0.1, 0.25, 1) !important;
  transition-delay: 0s !important;
}

.wp-block-post:hover .jw-poster-title,
.wp-block-post:focus-within .jw-poster-title {
  opacity: 1 !important;
  transition: opacity 1.25s cubic-bezier(0.25, 0.1, 0.25, 1) !important;
  transition-delay: 0.1s !important;
}

/* Client - all caps, tight tracking */
.jw-poster-client {
  font-size: 1.2rem !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  letter-spacing: -0.02em !important;
  line-height: 1.2 !important;
  margin-bottom: -6px !important;
  opacity: 0 !important;
  transition: opacity 0.5s cubic-bezier(0.25, 0.1, 0.25, 1) !important;
  transition-delay: 0s !important;
}

.wp-block-post:hover .jw-poster-client,
.wp-block-post:focus-within .jw-poster-client {
  opacity: 1 !important;
  transition-delay: 0s !important;
}

/* Details line (Type, Tone, Role) - inline, baseline aligned */
.jw-poster-details {
  display: flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  gap: 1.5em !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  line-height: 1 !important;
  opacity: 0 !important;
  transition: opacity 0.5s cubic-bezier(0.25, 0.1, 0.25, 1) !important;
  transition-delay: 0s !important;
}

.wp-block-post:hover .jw-poster-details,
.wp-block-post:focus-within .jw-poster-details {
  opacity: 1 !important;
  transition-delay: 0s !important;
}

/* Detail values */
.jw-detail-value {
  font-size: 0.5rem !important;
  font-weight: 400 !important;
}

/* Tone - bold */
.jw-detail-tone {
  font-weight: 700 !important;
}

/* Show darken overlay on hover */
.wp-block-post:hover .jw-darken-overlay,
.wp-block-post:focus-within .jw-darken-overlay {
  opacity: 1 !important;
}

/* Remove any dark background from the query and post template wrappers.  
   Some themes wrap the Query Loop in a container with a black background.  
   Setting these to transparent ensures the white tiles and gutter show through. */
.wp-block-query,
.wp-block-post-template {
  background-color: transparent !important;
}

/*
 * Some themes further wrap Query Loop content in Group or Cover blocks with
 * their own background colours. These rules ensure those wrappers inherit
 * transparency so the white portfolio tiles sit on a clean white page.
 */
.wp-block-query .wp-block-group,
.wp-block-query .wp-block-cover,
.wp-block-query .wp-block-cover-image {
  background-color: transparent !important;
  background: none !important;
}

/* Hide the default post title - we use the hover overlay text instead */
.wp-block-post .wp-block-post-title,
.wp-block-post .wp-block-post-title a {
  display: none !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
  position: absolute !important;
  opacity: 0 !important;
}