/*
 Theme Name:   Fewer Child
 Theme URI:    https://example.com/
 Description:  Child theme for Fewer theme
 Author:       Your Name
 Template:     fewer
 Version:      1.0.0
*/

/* ===========================
   Project tiles (1:1) + hover
   =========================== */

.project-cover {
  /* square tile by default; override with a4/a3 classes as needed */
  aspect-ratio: 1 / 1;
  position: relative;
  overflow: hidden;
}

/* Start hidden: show label on hover */
.project-cover p {
  opacity: 0;
  transition: opacity 0.3s ease;
}
.project-cover:hover p {
  opacity: 1;
}

/* Darken overlay sits above image, below text */
.project-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5); /* darken amount */
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;              /* BELOW text, ABOVE image */
  pointer-events: none;    /* keep links/text clickable */
}
.project-cover:hover::after {
  opacity: 1;
}

/* Ensure text stays above overlay */
.project-cover .wp-block-cover__inner-container,
.project-cover .wp-block-group__inner-container,
.project-cover p,
.project-cover h1,
.project-cover h2,
.project-cover h3,
.project-cover h4,
.project-cover h5,
.project-cover h6,
.project-cover a,
.project-cover .wp-block-heading {
  position: relative;
  z-index: 2;
}

/* Image zoom (works for Image blocks and Cover backgrounds) */
.project-cover img,
.project-cover .wp-block-cover__image-background {
  transition: transform 0.5s ease;
  display: block;
}
.project-cover:hover img,
.project-cover:hover .wp-block-cover__image-background {
  transform: scale(1.05);
}

/* Make a whole column/box clickable when wrapped with <a class="column-link">...</a> */
a.column-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* Respect accessibility preferences: reduce motion */
@media (prefers-reduced-motion: reduce) {
  .project-cover img,
  .project-cover .wp-block-cover__image-background {
    transition: none;
    transform: none !important;
  }
  .project-cover p,
  .project-cover::after {
    transition: none;
  }
}

/* Make the entire tile clickable using an invisible button overlay */
.project-cover { position: relative; }

.project-cover .wp-block-button__link.cover-link {
  position: absolute;
  inset: 0;                 /* top:0; right:0; bottom:0; left:0 */
  z-index: 3;               /* above overlays & image, below visible text if needed */
  display: block;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: transparent !important;    /* hide button label visually */
  text-indent: -9999px;             /* keep it accessible but invisible */
  cursor: pointer;
}

/* Remove any default button wrapper spacing so it doesn't shift layout */
.project-cover .wp-block-buttons,
.project-cover .wp-block-button {
  margin: 0;
  padding: 0;
}


/* =================================
   A-series aspect-ratio utility boxes
   ================================= */

/* Apply to any block (Group, Cover, Column, etc.) */
.a4-portrait {
  aspect-ratio: 1 / 1.414;   /* width : height */
  width: 100%;
  display: flex;             /* enable flexbox */
  align-items: center;       /* vertical centering */
  justify-content: center;   /* horizontal centering */
  text-align: left;        /* left text lines too */
}
.a3-landscape {
  aspect-ratio: 1.414 / 1;   /* width : height */
  width: 100%;
  display: flex;             /* enable flexbox */
  align-items: center;       /* vertical centering */
  justify-content: center;   /* horizontal centering */
  text-align: left;        /* left text lines too */
}
}
.row-height {
  height: 70vh;
}

/* Optional: keep them from getting huge on big screens */
.a4-portrait,
.a3-landscape {
  max-width: 1400px;         /* tweak or remove */
  margin-inline: auto;
}



/* Quick centering helper for content inside ratio boxes */
.ratio-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* For Image blocks used INSIDE a ratio box: fill neatly */
.fill-img {
  width: 100%;
  object-fit: cover;          /* crop to fill */
  display: block;
}

/* Cover block niceties when used as a tile */
.wp-block-cover.a4-portrait,
.wp-block-cover.a3-landscape {
  padding: 0;                 /* remove default inner padding */
  overflow: hidden;           /* hide zoom/crop overflow */
}

/* Optional: reusable hover helpers for any tile */
.tile-hover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.25);
  opacity: 0;
  transition: opacity .25s ease;
  z-index: 1;
  pointer-events: none;
}
.tile-hover:hover::after { opacity: 1; }

.tile-zoom .wp-block-cover__image-background,
.tile-zoom img {
  transition: transform .5s ease;
}
.tile-zoom:hover .wp-block-cover__image-background,
.tile-zoom:hover img {
  transform: scale(1.05);
}

.img-a4-portrait {
  width: 100%;                 /* always span container width */
  aspect-ratio: 1 / 1.414;     /* A4 portrait ratio (width : height) */
  object-fit: cover;           /* cover + crop instead of distort */
  display: block;              /* remove inline gaps */
}

.img-a3-landscape {
  width: 100%;
  aspect-ratio: 1.414 / 1;     /* A3 landscape */
  object-fit: cover;
  display: block;
}


/* =================================
   Home Page Background Slide Show
   ================================= */

.hero-slideshow {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.hero-slideshow .hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  animation: slideShow 30s infinite; /* 6 slides × 7s */
  opacity: 0;
}

.hero-slideshow .hero-slide:nth-child(1) { animation-delay: 0s; }
.hero-slideshow .hero-slide:nth-child(2) { animation-delay: 5s; }
.hero-slideshow .hero-slide:nth-child(3) { animation-delay: 10s; }
.hero-slideshow .hero-slide:nth-child(4) { animation-delay: 15s; }
.hero-slideshow .hero-slide:nth-child(5) { animation-delay: 20s; }
.hero-slideshow .hero-slide:nth-child(6) { animation-delay: 25s; }

@keyframes slideShow {
  0% { opacity: 0; }
  10% { opacity: 1; }
  30% { opacity: 1; }
  40% { opacity: 0; }
  100% { opacity: 0; }
}


/* Foreground content (logo, title, nav) */
.hero-slideshow .hero-content {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100%;
}


/* =================================
   Universal centering for Gutenberg Columns
   ================================= */

/* Desktop/tablet: center Columns rows when total width < 100% */
@media (min-width: 782px) {
  .wp-block-columns {
    display: flex;                 /* WP already uses flex, this is safe */
    justify-content: center;       /* center the set of columns */
  }
  .wp-block-column {
    flex: 0 0 auto;                /* honor your % widths, don't stretch */
  }
}
/* Mobile: let WordPress stack as usual (no overrides needed) */



/* =================================
   Otter Home Page Hero Slider
   ================================= */

/* Base: slider is centered and fills available width up to a max */
.hero-slider {
  width: auto;
  max-width: 1100px;      /* desktop cap so it doesn't get stupid-wide */
  max-height: 50vh;      /* desktop cap so it doesn't get stupid-tall */
  margin-left: auto;
  margin-right: auto;
}

/* Enforce a nice aspect ratio for the images/slides */
.hero-slider .wp-block-otter-image-slider-wrapper,
.hero-slider .slick-slide img {
  aspect-ratio: 1.41 / 1;   /* change to 3 / 1, 21 / 9, etc if you want more cinematic */
  object-fit: cover;
  width: auto;
  height: auto;
}

/* Tablet: tighten up a bit if you like */
@media (max-width: 1024px) {
  .hero-slider {
    max-width: 90vw;      /* roughly 90% of viewport width */
  }
}

/* Mobile: keep it ~90% wide so it breathes from the edges */
@media (max-width: 768px) {
  .hero-slider {
    max-width: 90vw;      /* you can change to 100vw if you want edge-to-edge */
  }
}

/* Foreground content (logo, title, nav) */
 .home-content {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 30vh;
}

/* Top spacer: fluid on big screens, tiny on phones */
.top-space {
  height: clamp(6px, 10vh, 100px) !important;
}

/* On small mobile, keep it *really* small */
@media (max-width: 768px) {
  .top-space {
    height: 6px !important;
  }
}


/* =================================
   Getting Stacks to work correctly and contain images without overflow
   ================================= */

.image-stack-container {
    overflow: hidden;
}

.image-stack-container img {
    max-width: 100%;
    height: auto;
    display: block;
}