/* ==================================================
   ASL — BLOCK STYLES
   Gutenberg block styles (Editor + Elementor-safe)
================================================== */

/* ==================================================
   QUOTES (Block Quote)
================================================== */

.wp-block-quote {
  margin: 2.5rem 0;
  padding-left: 1.5rem;
  border-left: 4px solid var(--active-posts-500);
}

.wp-block-quote p {
  font-family: var(--font-body);
  font-size: clamp(18px, 1.2vw, 22px);
  line-height: 1.5;
  font-weight: 500;
  margin: 0;
}

.wp-block-quote cite {
  display: block;
  margin-top: 0.75rem;
  font-size: 14px;
  opacity: 0.7;
  font-style: normal;
}

/* ===============================
   ASL Subhead (Editorial)
=============================== */

.wp-block-heading.is-style-asl-subhead {
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 2vw, 1.6rem); /* ⬅ bigger */
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-top: 4rem;
  margin-bottom: 1rem;
  color: var(--black-500);
}

/* ==================================================
   ASL X-HEAD (Heading Block Style)
================================================== */

.wp-block-heading.is-style-asl-xhead {
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(0.95rem, 1.15vw, 1.05rem);
  letter-spacing: 0.06em;
  margin-top: 2.75rem;
  margin-bottom: 0.85rem;
}


/* ==================================================
   ASL CLEAN LIST (Generic List Block Style)
================================================== */

.wp-block-list.is-style-asl-clean {
  list-style: none;
  margin: 0;
  padding: 0;
}

.wp-block-list.is-style-asl-clean li {
  display: grid;
  grid-template-columns: 4ch auto;
  column-gap: 0.75rem;
  margin-bottom: 0.4rem;
  line-height: 1.45;
}

.wp-block-list.is-style-asl-clean li strong {
  font-weight: 900;
  text-align: left;
	letter-spacing: 0.02em;
}

/* Editor parity for ASL Clean List */
.editor-styles-wrapper
.wp-block-list.is-style-asl-clean li {
  display: grid;
  grid-template-columns: 4ch auto;
  column-gap: 0.75rem;
}

/* =========================================
   ASL — NAME LIST (editorial roster)
========================================= */

.wp-block-list.is-style-asl-names {
  list-style: none;
  margin: 0;
  padding: 0;
}

.wp-block-list.is-style-asl-names li {
  display: block;
  margin-bottom: 0.35rem;
  line-height: 1.45;
}

.wp-block-list.is-style-asl-names li {
  break-inside: avoid;
}

.wp-block-list.is-style-asl-names {
  column-gap: 2rem;
}

@media (min-width: 768px) {
  .wp-block-list.is-style-asl-names {
    column-count: 2;
    column-gap: 2.5rem;
  }
}

@media (min-width: 1200px) {
  .wp-block-list.is-style-asl-names {
    column-count: 3;
  }
}

.wp-block-list {
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
}

/* ================================================
   FAQ — FINAL (Elementor typography opt-out)
================================================ */

/* ASL FAQ — TITLE (Heading Block Style) */
.elementor-widget-theme-post-content
.wp-block-heading.is-style-asl-faq-title {
  font-family: var(--font-heading) !important;
  font-weight: 900 !important;
  letter-spacing: -0.01em;
  text-transform: none;
  font-size: clamp(1.4rem, 2.5vw, 1.8rem);
  line-height: 1.2;
  margin-top: 4rem;
  margin-bottom: 1.5rem;
}

/* Question */
.elementor-widget-theme-post-content
p.is-style-asl-faq-question {
  font-family: var(--font-body) !important;
  font-size: clamp(0.95rem, 1.2vw, 1.05rem);
  font-weight: 700 !important;
  line-height: 1.5;
  margin-top: 1.75rem;
  margin-bottom: 0.35rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

/* Answer */
.elementor-widget-theme-post-content
p.is-style-asl-faq-answer {
  font-family: var(--font-body) !important;
  font-size: clamp(0.95rem, 1.2vw, 1.05rem);
  font-weight: 400 !important;
  line-height: 1.6;
  margin-top: 0;
  margin-bottom: 1.5rem;
}

.editor-styles-wrapper
.wp-block-paragraph.is-style-asl-faq-question {
  font-weight: 700;
  margin-top: 1.75rem;
  margin-bottom: 0.35rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(0,0,0,0.08);
}

/* ================================================
   ASL — PULL QUOTE (FINAL)
================================================ */

.wp-block-pullquote.is-style-asl-pullquote {
  margin: 2.5rem auto;
  padding: 0;
  text-align: left;
}

/* Reset Gutenberg / theme defaults */
.wp-block-pullquote.is-style-asl-pullquote blockquote {
  margin: 0 auto;
  padding-left: 1rem;
  max-width: 48ch;
  border-left: 2px solid color-mix(in srgb, currentColor 40%, transparent);
}

/* Quote text */
.wp-block-pullquote.is-style-asl-pullquote blockquote p {
  font-family: var(--font-body);
  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
  line-height: 1.2;
  font-weight: 500;
  font-style: italic;
  margin: 0;
}

/* Attribution */
.wp-block-pullquote.is-style-asl-pullquote blockquote cite {
  display: block;
  margin-top: 0.75rem;
  font-family: var(--font-body);
  font-size: 0.8rem; /* FIXED */
  font-weight: 400;
  letter-spacing: 0.08em;
  opacity: 0.55;
  font-style: normal; /* OVERRIDES browser default */
  text-transform: uppercase;
}

/* Dash prefix */
.wp-block-pullquote.is-style-asl-pullquote blockquote cite::before {
  content: "— ";
}

/* Inline editorial quotes only (NOT pull quotes) */
.elementor-widget-theme-post-content
.wp-block-quote:not(.is-style-asl-pullquote) p {
  font-style: italic;
  opacity: 0.9;
}

/* Editor support */
.editor-styles-wrapper
.wp-block-pullquote.is-style-asl-pullquote blockquote p {
  font-style: italic;
  font-weight: 900;
}

/* Editor support */
.editor-styles-wrapper
.wp-block-pullquote.is-style-asl-pullquote p {
	font-family: var(--font-body);
  font-weight: 900;
}


/* ================================================
   ASL — IMAGE/PULLQUOTE FALLBACK (no style applied)
================================================ */

.single-post .wp-block-image:not([class*="is-style-asl-image"]),
.single-post .wp-block-embed,
.single-post .wp-block-pullquote {
  margin-top: 3rem;
  margin-bottom: 3rem;
}

/* ================================================
   ASL — IMAGES
================================================ */

.wp-block-image.is-style-asl-image {
  margin: 2.5rem 0;
}

.wp-block-image.is-style-asl-image img {
  border-radius: 0;
}

.wp-block-image.is-style-asl-image figcaption {
  margin-top: 0.5rem;
  font-size: 0.8rem;
  opacity: 0.7;
  text-align: left;
}

/* ================================
   IMAGES
================================ */

/* Feature image (hero / editorial) */
.wp-block-image.is-style-asl-image-feature {
  margin: 3rem 0;
}

.wp-block-image.is-style-asl-image-feature figcaption {
  margin-top: 0.75rem;
  font-size: 0.85rem;
  opacity: 0.7;
}


/* Inline image (within copy) */
.wp-block-image.is-style-asl-image-inline {
  margin: 1.5rem 0;
}

/* ================================================
   ASL — Image spacing intelligence
================================================ */

/* Editorial spacing for standalone images */

.single-post .wp-block-image:not(.is-style-asl-image-set),
.single-project .wp-block-image:not(.is-style-asl-image-set) {
  margin: 3rem 0;
}

/* Remove margins for images inside grids */

.single-post .wp-block-grid .wp-block-image,
.single-project .wp-block-grid .wp-block-image,
.single-post .is-layout-grid .wp-block-image,
.single-project .is-layout-grid .wp-block-image {
  margin: 0;
}

/* Reduce space when images follow images */
.single-post .wp-block-image + .wp-block-image {
  margin-top: 1.5rem;
}

/* ================================================
   ASL — IMAGE SET (Grid-safe)
   Works with Gutenberg Grid block
================================================ */

/* Scope ONLY to ASL Image Set IMPORTANT: do NOT affect grid layout itself */
.wp-block-group.is-style-asl-image-set,
.wp-block-grid.is-style-asl-image-set {
  margin: clamp(2rem, 4vw, 3.5rem) 0;
}

/* CRITICAL: reset grid items so they can shrink */
.wp-block-group.is-style-asl-image-set > *,
.wp-block-grid.is-style-asl-image-set > * {
  min-width: 0;
  width: auto;
  max-width: 100%;
}

/* Kill theme image margins inside sets */
.wp-block-group.is-style-asl-image-set .wp-block-image,
.wp-block-grid.is-style-asl-image-set .wp-block-image {
  margin: 0;
}

/* Figure: structural only (NO flex, NO width hacks) */
.wp-block-group.is-style-asl-image-set figure,
.wp-block-grid.is-style-asl-image-set figure {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Images fill their grid cell safely */
.wp-block-group.is-style-asl-image-set img,
.wp-block-grid.is-style-asl-image-set img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
}

/* Captions */
.wp-block-group.is-style-asl-image-set figcaption,
.wp-block-grid.is-style-asl-image-set figcaption {
  margin-top: 0.5rem;
  font-size: 0.85em;
  opacity: 0.75;
}

/* Vertical rhythm in post content */
.single-post
.elementor-widget-theme-post-content
.wp-block-grid.is-style-asl-image-set {
  margin-top: 3rem;
  margin-bottom: 3rem;
}

/* ================================================
   ASL — FIGCAPTION (editorial)
================================================ */

.wp-block-image figcaption {
  margin-top: 0.75rem;
  max-width: clamp(40ch, 90%, 60ch);
  font-style: italic;
  font-size: 0.8em;
  border-left: 1px solid rgba(0,0,0,0.12);
  padding-left: 1rem;
  color: rgba(0,0,0,0.75);
}

@media (max-width: 720px) {
  .wp-block-image figcaption {
    max-width: 100%;
  }
}

/* =========================================
   ASL – LINKS (Editorial Block Style)
========================================= */

.is-style-asl-links a,
.is-style-asl-links a:visited {
  color: var(--black-500);
  font-weight: 500;
  text-decoration: none;

  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 95%;
  background-repeat: no-repeat;

  transition:
    background-size 0.28s cubic-bezier(.4,0,.2,1),
    color 0.28s cubic-bezier(.4,0,.2,1);
}

/* Hover */
body.single-post .is-style-asl-links a:hover,
body.single-post .is-style-asl-links a:focus,
body.single-post .is-style-asl-links a:visited:hover {
  color: var(--active-news-500) !important;
  background-size: 100% 1px;
}

/* ================================
   space above the video embed
================================ */

.single-post .wp-block-embed {
  margin-top: 3rem;
}

/* =========================================
   ASL Project Video – Responsive
========================================= */

.asl-hero-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;   /* THIS makes it responsive */
  overflow: hidden;
  background: #000;
}

.asl-hero-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ========================================= 
ASL Hero – Centre Play CTA (Editorial) 
========================================= */ 

/* RESET – kill Elementor button styles */ 
.asl-video-start, .asl-video-start:hover, 
.asl-video-start:focus, .asl-video-start:active {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
} 

/* also reset any inherited button styles */ 
.asl-video-start.elementor-button, 
.asl-video-start[class*="elementor"] {
  all: unset;
}

.asl-video-start {
  position: absolute;
  top: 50%;
  left: 50%;
  opacity: 1;
  transform: translate(-50%, -50%) translateY(0);
  z-index: 8;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  transition: opacity .35s ease, transform .45s cubic-bezier(0.22, 1, 0.36, 1);
  color: var(--section-50, #fff);
} 

/* SVG icon */ 
.asl-video-start__icon svg {
  width: 80px;
  height: 80px;
  display: block;
  transition: transform .3s ease;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

/* Label */ 
.asl-video-start__label {
  display: block;
  width: 100%;
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 600;
  text-align: center;
  color: #fff;
  margin-top: 6px;
  opacity: .85;
  transition: opacity .25s ease;
  transform: translateY(1px);
} 

/* Hover interaction */ 
.asl-video-start:hover .asl-video-start__icon svg {
  transform: scale(0.94); /* 6% grow */
} 

/* Hidden state (animated) */ 
.asl-video-start.is-hiding {
  opacity: 0;
  transform: translate(-50%, -50%) translateY(-8px) scale(0.96);
  pointer-events: none;
} 

/* Fully hidden (after animation completes) */ 
.asl-video-start.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.asl-video-start:hover .asl-video-start__label {
  opacity: 1;
}

.asl-video-start__label {
  text-shadow: 0 2px 6px rgba(0,0,0,0.45);
}

.asl-hero-video iframe {
  pointer-events: none;
}

/* ASL Vimeo – Editorial Video */

.asl-hero-video--hero {
  display: block;
  aspect-ratio: 16 / 9;
  position: relative;
  width: 100%;
  overflow: hidden;

  flex: 0 0 auto; /* THIS FIXES IT */
}

.asl-hero-video--hero iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ========================================= 
ASL Hero – Mobile CTA Tuning 
========================================= */

@media (max-width: 767px) {

  /* smaller play icon */
  .asl-video-start__icon svg {
    width: 52px;
    height: 52px;
  }

  /* hide label */
  .asl-video-start__label {
    display: none;
  }

  /* optional: tighten spacing */
  .asl-video-start {
    gap: 0;
  }

}


/* =========================================
   ASL Project Layout
========================================= */


/* -----------------------------------------
   Project Content Wrapper
----------------------------------------- */

.is-style-asl-project-content {
  display: grid;
  gap: clamp(3rem, 6vw, 5rem);
}

/* Remove margins from children */
.is-style-asl-project-content > * {
  margin-block: 0 !important;
}

.is-style-asl-project-content img {
  width: 100%;
  height: auto;
  display: block;
}

/* Prevent Gutenberg width constraint */

.wp-block-group.is-style-asl-project-content.is-layout-constrained {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

.wp-block-group.is-style-asl-project-content.is-layout-constrained
> :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  max-width: none;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* =========================================
   ASL Project Section
   Editorial two-column layout
========================================= */

.is-style-asl-project-section {
  display: grid;
  grid-template-columns: 1fr minmax(0, 65ch);
  gap: clamp(1.1rem, 2.2vw, 1.75rem);
  align-items: start;
}

/* Headings left column */
.is-style-asl-project-section > h2,
.is-style-asl-project-section > h3 {
  grid-column: 1;
  margin: 0;
}

/* Copy right column */
.is-style-asl-project-section > p,
.is-style-asl-project-section > ul,
.is-style-asl-project-section > ol,
.is-style-asl-project-section > blockquote {
  grid-column: 2;
  margin: 0;
  font-size: var( --e-global-typography-2542de4-font-size );
  line-height: 1.65;
}

/* Prevent Gutenberg constrained layout interference */
.is-style-asl-project-section.is-layout-constrained > * {
  max-width: none;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.is-style-asl-project-section > figure,
.is-style-asl-project-section > .wp-block-image {
  grid-column: 2;
}

/* Responsive */

@media (max-width: 1200px) {

  .wp-block-group.is-style-asl-project-section{
    grid-template-columns: 1fr !important;
    gap: clamp(0.8rem, 3vw, 1.2rem) !important;
  }

  /* Everything stacks full width */
  .wp-block-group.is-style-asl-project-section > *{
    grid-column: 1 / -1 !important;
  }
  .is-style-asl-project-section {
  max-width: 100%;
  margin-left: 0;
  }

}

/* =========================================
   ASL Project Grid
   Responsive editorial image grid used on
   project pages. Supports portrait, square,
   landscape and video ratios while
   maintaining consistent spacing and rhythm.
========================================= */

/* Grid container */

.is-style-asl-project-grid {
  display: grid;

  grid-template-columns: repeat(2, minmax(0,1fr));

  /* Editorial spacing */
  gap: clamp(1.2rem, 2.2vw, 2.6rem) clamp(.8rem, 1.6vw, 1.4rem);

  margin-top: 0;

  align-content: start;
  align-items: start;
  grid-auto-flow: dense;
}

/* Image behaviour */

.is-style-asl-project-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* -----------------------------------------
   Aspect ratio helpers
----------------------------------------- */

figure.is-style-asl-portrait {
  aspect-ratio: 4 / 5;
}

figure.is-style-asl-square {
  aspect-ratio: 1 / 1;
}

figure.is-style-asl-landscape {
  grid-column: span 2;
  aspect-ratio: 16 / 9;
}

figure.is-style-asl-square,
figure.is-style-asl-landscape,
figure.is-style-asl-video {
  overflow: hidden;
}

figure.is-style-asl-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.is-style-asl-project-grid figure {
  position: relative;
  width: 100%;
  height: 100%;
}

.is-style-asl-project-grid figure > img {
  height: 100%;
}

/* Video (16:9) — spans two columns */
.is-style-asl-project-grid figure.is-style-asl-video {
  grid-column: 1 / -1;
  aspect-ratio: 16 / 9;
}

/* Video spans grid width */
.is-style-asl-project-grid .asl-hero-video,
.is-layout-grid .asl-hero-video {
  grid-column: 1 / -1;
}

/* -----------------------------------------------
   Mobile layout
----------------------------------------------- */

@media (max-width: 700px) {

  .is-style-asl-project-grid {
    grid-template-columns: 1fr !important;
  }

  /* Reset default items */
  .is-style-asl-project-grid figure {
    grid-column: 1 / -1 !important;
  }

  /* Keep full-width behaviour explicit */
  .is-style-asl-project-grid figure.is-style-asl-landscape,
  .is-style-asl-project-grid figure.is-style-asl-video {
    grid-column: 1 / -1 !important;
  }

  /* Optional: remove forced ratios on mobile */
  .is-style-asl-project-grid figure {
    aspect-ratio: auto;
  }

  .is-style-asl-project-grid img {
    height: auto;
  }
} 

/* =========================================
   ASL Fade-up reveal (scroll)
========================================= */

.asl-reveal{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s ease, transform .6s ease;
  will-change: opacity, transform;
}

.asl-reveal.is-inview{
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce){
  .asl-reveal{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* =========================================
   PROJECT — allow media to go full width
========================================= */

.wp-block-image.is-style-asl-landscape img {
  width: 100%;
  max-width: none;
}

/* =========================================
   ASL Separator
========================================= */

.single-post .wp-block-separator{
    border-color:rgba(0,0,0,.15);
}