/*
Theme Name: IAIA Italia
Theme URI: https://www.iaiaitalia.org/
Author: IAIA Italia
Description: Tema a blocchi su misura per www.iaiaitalia.org. Sostituisce il
  layout Elementor con template versionabili. Nessuna dipendenza da jQuery o
  da librerie di carousel: le gallerie scorrono con CSS scroll-snap.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: iaia-italia
Tags: one-column, block-patterns, full-site-editing
*/

/* ---------------------------------------------------------------------------
   Scroll-snap strips — the zero-JS replacement for the three Elementor
   carousels (image-carousel, media-carousel, testimonial-carousel).
   Applied by adding the class to a core/gallery or core/columns block.
   Swiper.js was 38.8 KB gzipped; this is the whole replacement.
--------------------------------------------------------------------------- */

.wp-block-gallery.iaia-strip,
.iaia-strip {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--wp--preset--spacing--20, 16px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--wp--preset--spacing--20, 16px);
  scrollbar-width: thin;
}

/* core/gallery renders <figure class="wp-block-gallery"><figure class="wp-block-image">…
   so target the direct children generically rather than a block-specific class.

   Slide *width* is deliberately left to core: its
   .wp-block-gallery.has-nested-images figure.wp-block-image rule is more
   specific than anything reasonable here and lays the figures out three
   across (two below 600px), which is what the media-carousel did. Declaring
   a width here as well would look authoritative and do nothing. Non-gallery
   strips have no such rule, so they still need one. */
.wp-block-gallery.iaia-strip > figure,
.iaia-strip > * {
  flex: 0 0 auto;
  scroll-snap-align: center;
  margin: 0;
}

.iaia-strip > *:not(figure) { width: min(80vw, 420px); }

/* One ratio for every slide. The hackathon set mixes four 4:3 landscape
   photographs with seven 3:4 portraits; left alone the flex row is as tall as
   its tallest slide, so the landscape ones float in 146px of white and strand
   the dots below them. A square crops both orientations by the same amount
   and matches the circular team portraits.

   The ratio goes on the image, not the figure: a figure sized by aspect-ratio
   gives an indefinite height, so `height: 100%` on the image does not resolve
   and min-height:auto lets a tall image push the slide back out. This is the
   same shape as the .iaia-team rule below, which works for that reason. */
.iaia-strip img {
  width: 100%;
  aspect-ratio: 1;
  height: auto;
  object-fit: cover;
  border-radius: 4px;
}

/* Keyboard and reduced-motion users get a plain scroller, not a snapping one. */
@media (prefers-reduced-motion: reduce) {
  .iaia-strip { scroll-behavior: auto; scroll-snap-type: none; }
}

/* ---------------------------------------------------------------------------
   Strip controls — arrows and dots, in place of Swiper's. The wrapper and
   every control inside it are created by assets/js/iaia-strip.js, so none of
   this applies until the script has run: without JavaScript the strip is
   still a working scroller and no empty control row is left behind.
--------------------------------------------------------------------------- */

.iaia-strip-wrap {
  position: relative;
}

.iaia-strip-nav {
  position: absolute;
  top: calc(50% - 1.25em);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5em;
  height: 2.5em;
  /* The em sizing lands at 36px on a phone, under the 44px minimum for a
     touch target -- which is exactly where these buttons matter most. */
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--wp--preset--color--white, #fff);
  color: var(--wp--preset--color--navy, #324a6d);
  font-size: var(--wp--preset--font-size--xl, 20px);
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.28);
}

.iaia-strip-prev { left: 4px; }
.iaia-strip-next { right: 4px; }

.iaia-strip-nav:hover,
.iaia-strip-nav:focus-visible {
  background: var(--wp--preset--color--navy, #324a6d);
  color: var(--wp--preset--color--white, #fff);
}

.iaia-strip-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}

.iaia-strip-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--wp--preset--color--grey, #7a7a7a);
  opacity: 0.45;
  cursor: pointer;
}

.iaia-strip-dot[aria-current] {
  background: var(--wp--preset--color--navy, #324a6d);
  opacity: 1;
}

/* The controls are the one part of the page that must never be invisible to
   keyboard users, since they are the only way to drive the strip by keyboard. */
.iaia-strip-nav:focus-visible,
.iaia-strip-dot:focus-visible {
  outline: 2px solid var(--wp--preset--color--blue, #467ff7);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   Plain image row — the three q-HACK logos. Not a carousel in Elementor and
   not one here: no snapping, no controls, and no square crop, because two of
   the three are logos rather than photographs.
--------------------------------------------------------------------------- */

.wp-block-gallery.iaia-row,
.iaia-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--wp--preset--spacing--30, 24px);
}

.wp-block-gallery.iaia-row > figure,
.iaia-row > * { margin: 0; }

.iaia-row img {
  height: auto;
  object-fit: contain;
}

/* ---------------------------------------------------------------------------
   Team grid — replaces the testimonial-carousel. All ten people are visible
   at once instead of being hidden behind slide navigation.
--------------------------------------------------------------------------- */

.wp-block-gallery.iaia-team,
.iaia-team {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--wp--preset--spacing--40, 40px);
  align-items: start;
}

.wp-block-gallery.iaia-team > figure,
.iaia-team figure { margin: 0; width: auto; }

.iaia-team img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
}

/* ---------------------------------------------------------------------------
   Contacts list in the footer — the inline SVG icons carried over from the
   Elementor icon-list widget.
--------------------------------------------------------------------------- */

.iaia-contacts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--wp--preset--spacing--20, 16px);
}

.iaia-contacts li {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* The footer sits on the navy background, where the global navy link colour
   would be invisible; links there inherit the footer's own text colour. */
.iaia-contacts a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.iaia-contacts svg {
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  fill: currentColor;
}

/* ---------------------------------------------------------------------------
   Page rhythm — production renders a 650px centred column on a 1880px
   viewport, body copy centre-aligned throughout. 800px (theme.json
   contentSize) keeps that centred feel without reproducing a column that
   cramped on a wide screen.
--------------------------------------------------------------------------- */

.wp-block-post-content {
  text-align: center;
}

/* Fluent Forms lays its own labels above their inputs; centring them floats
   each label away from the field it belongs to. */
.wp-block-post-content .fluentform {
  text-align: left;
}

/* ---------------------------------------------------------------------------
   Two-column sections — the two places Elementor lays the page out as a row
   rather than a stack: "La Piattaforma…" (text, then the IAIA25 card above
   the tree) and "La mission e la Vision" (text, then the IAIA ITALIA card).
   Production ranges this text left, and a centred paragraph beside a
   full-height image reads as unmoored, so the centring stops here.

   Column widths and the stacking breakpoint are core's; below 782px the
   columns become text → card → tree, which is the order production shows
   when its own row wraps.
--------------------------------------------------------------------------- */

.wp-block-post-content .iaia-split {
  text-align: left;
  align-items: flex-start;
  gap: var(--wp--preset--spacing--40, 40px);
}

/* Two stacked images in the image column need air between them; the first
   also needs to line up with the top of the heading beside it. */
.iaia-split .wp-block-column > .wp-block-image + .wp-block-image {
  margin-top: var(--wp--preset--spacing--30, 24px);
}

.iaia-split .wp-block-column > :first-child {
  margin-top: 0;
}

/* Production does not run these images edge to edge either: the tree is
   256px inside a 276px column, 93%, which is what 320px of this 344px column
   comes to. 320px is also exactly a size srcset offers, so the browser stops
   reaching for the 640px file to fill a 337px slot. */
.iaia-split .wp-block-image {
  text-align: center;
}

.iaia-split .wp-block-image img {
  width: 100%;
  max-width: 320px;
  height: auto;
}