/**
  Theme Name: NextAwards Child
  Template:   nextawards
  Author: Alessio
  Version:    1.0
*/

/* =========================
   BASE
========================= */
body {
  background-color: #242424 !important;
}

/* Home: wrapper full-bleed (tu lo volevi così) */
body.home .wrapper {
  margin: 0 !important;
  padding: 0 !important;
}

/* Cover full width */
.wp-block-cover.full-width {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  max-width: 100% !important;
}

/* Animazione entrance */
.be-entrance-top {
  opacity: 0;
  transform: translateY(-24px);
  animation: beFadeDown 800ms 0.5s ease-out forwards;
}

@keyframes beFadeDown {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================
   DESTINATION CARD
========================= */
.destination-card {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0,0,0,0.08);
  transition: transform .3s ease, box-shadow .3s ease;
}

.destination-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px rgba(0,0,0,0.12);
}

/* Media wrapper */
.destination-media {
  position: relative;
  height: 320px;
  border-radius: 16px;
  overflow: hidden;
}

/* Normalizza wrapper Gutenberg dentro al media */
.destination-media figure,
.destination-media .wp-block-image,
.destination-media .wp-block-post-featured-image {
  height: 100%;
  margin: 0;
}

/* Anchor generato da Featured Image -> Link to post */
.destination-media > a,
.destination-media figure > a,
.destination-media .wp-block-post-featured-image > a {
  display: block;
  width: 100%;
  height: 100%;
}

/* Immagine */
.destination-media > a > img,
.destination-media figure > a > img,
.destination-media .wp-block-post-featured-image > a > img,
.destination-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;

  transform: scale(1);
  transition: transform .35s ease;
}

/* Zoom */
.destination-card:hover .destination-media > a > img,
.destination-card:hover .destination-media figure > a > img,
.destination-card:hover .destination-media .wp-block-post-featured-image > a > img,
.destination-card:focus-within .destination-media > a > img,
.destination-card:focus-within .destination-media figure > a > img,
.destination-card:focus-within .destination-media .wp-block-post-featured-image > a > img,
.destination-card:hover .destination-image img,
.destination-card:focus-within .destination-image img {
  transform: scale(1.08);
}

/* Overlay */
.destination-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  margin: 0 !important;
  padding: 18px 18px 20px 18px;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;

  background:
    linear-gradient(90deg,
      rgba(0,0,0,0.75) 0%,
      rgba(0,0,0,0.55) 22%,
      rgba(0,0,0,0.55) 78%,
      rgba(0,0,0,0.75) 100%
    ),
    linear-gradient(180deg,
      rgba(0,0,0,0.15) 0%,
      rgba(0,0,0,0.70) 100%
    );

  opacity: 0;
  transform: translateY(-10px);
  transition: opacity .25s ease, transform .25s ease;

  pointer-events: none;
}

.destination-overlay .wp-block-button__link {
  pointer-events: auto;
}

/* Mostra overlay */
.destination-card:hover .destination-overlay,
.destination-card:focus-within .destination-overlay {
  opacity: 1;
  transform: translateY(0);
}

/* Reset margini nell’overlay */
.destination-overlay h1,
.destination-overlay h2,
.destination-overlay h3,
.destination-overlay h4,
.destination-overlay h5,
.destination-overlay h6,
.destination-overlay p,
.destination-overlay .wp-block-buttons {
  margin: 0 !important;
}

/* Testi overlay */
.destination-overlay h3,
.destination-overlay p {
  color: #fff;
}

.destination-overlay p {
  color: rgba(255,255,255,0.85);
}

/* Bottoni overlay */
.destination-overlay .wp-block-buttons {
  gap: 10px;
}

.destination-overlay .wp-block-button__link {
  background: #fff;
  color: #000;
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 700;
  text-decoration: none;
}

.destination-overlay .wp-block-button__link:hover {
  opacity: 0.9;
}

/* Mobile: overlay sempre visibile (UNA sola media query, pulita) */
@media (max-width: 768px) {
  .destination-media {
    height: 220px;
  }

  .destination-overlay {
    opacity: 1;
    transform: none;
    background:
      linear-gradient(90deg,
        rgba(0,0,0,0.75) 0%,
        rgba(0,0,0,0.45) 22%,
        rgba(0,0,0,0.45) 78%,
        rgba(0,0,0,0.75) 100%
      ),
      linear-gradient(180deg,
        rgba(0,0,0,0.10) 0%,
        rgba(0,0,0,0.60) 100%
      );
  }
}

/* =========================
   SINGLE PROJECT
========================= */
.single-project,
.single-project .text-content,
.single-project .project-content {
  color: rgba(255,255,255,0.92);
}

.single-project h1,
.single-project h2,
.single-project h3,
.single-project h4,
.single-project h5,
.single-project h6 {
  color: #fff;
}

.single-project a {
  color: #fff;
  text-decoration: none;
}
.single-project a:hover {
  color: rgba(255,255,255,0.85);
  text-decoration: underline;
}

.single-project hr {
  border-color: rgba(255,255,255,0.12);
}

.single-project blockquote {
  border-left: 3px solid rgba(255,255,255,0.18);
}

/* Player fisso */
.single-project .project-video {
  position: relative;
  width: 100%;
  max-width: 900px;
  height: 520px;
  margin: 0 auto;
  border-radius: 16px;
  overflow: hidden;
}

.single-project .project-video iframe,
.single-project .project-video .project-video-tag {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

@media (max-width: 768px) {
  .single-project .project-video {
    max-width: 100%;
    height: 240px;
  }
}

/* =========================
   TEMPLATE align-wide-fix-trasparent
   Full width con gutter
========================= */
body.page-template-align-wide-fix-trasparent {
  --gutter: 3%;
  --site-bg: #242424;
  --site-text-color: #fff;
  --link-color: #fff;
  --link-color-hover: rgba(255,255,255,0.85);
}

@media (max-width: 768px) {
  body.page-template-align-wide-fix-trasparent {
    --gutter: 16px;
  }
}

body.page-template-align-wide-fix-trasparent .wrapper {
  padding-left: var(--gutter) !important;
  padding-right: var(--gutter) !important;
}

body.page-template-align-wide-fix-trasparent .grid {
  max-width: none;
}

/* Contenuto standard */
body.page-template-align-wide-fix-trasparent .is-align-system
  > :where(:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright)) {
  max-width: 1400px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--gutter) !important;
  padding-right: var(--gutter) !important;
}

/* Alignwide */
body.page-template-align-wide-fix-trasparent .is-align-system .alignwide {
  max-width: 1600px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--gutter) !important;
  padding-right: var(--gutter) !important;
}

/* Alignfull */
body.page-template-align-wide-fix-trasparent .is-align-system .alignfull {
  max-width: none !important;
  margin-left: calc(var(--gutter) * -1) !important;
  margin-right: calc(var(--gutter) * -1) !important;
  padding-left: var(--gutter) !important;
  padding-right: var(--gutter) !important;
}

/* Nested dentro alignfull */
body.page-template-align-wide-fix-trasparent .is-align-system
  > .alignfull
  > :where(h1, h2, h3, h4, h5, h6, p, figure, .wp-block-group):not(.alignfull):not(.alignwide) {
  max-width: 1400px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* HERO VIDEO full-bleed: togli il gutter SOLO a lui */
body.page-template-align-wide-fix-trasparent .hero-video,
body.page-template-align-wide-fix-trasparent .wp-block-cover.hero-video,
body.page-template-align-wide-fix-trasparent .wp-block-group.hero-video {
  margin-left: calc(var(--gutter) * -1) !important;
  margin-right: calc(var(--gutter) * -1) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: auto !important;
  max-width: none !important;
  min-height: 100vh !important;
}

/* =========================
   FOOTER dark
========================= */
.footer-container {
  background-color: #242424 !important;
  color: rgba(255,255,255,0.92) !important;
}

.footer-container a {
  color: #fff !important;
}

.footer-container hr {
  border-bottom: 1px solid rgba(255,255,255,0.12) !important;
}

/* =========================
   FIX SPAZI TRA PROGETTI (Query Loop)
   Qui stringiamo davvero.
========================= */

/* 1) Gap del Post Template (griglia del Query Loop) */
.wp-block-post-template {
  gap: 12px !important;         /* ridotto: era 18 */
  row-gap: 12px !important;
  column-gap: 12px !important;
}

/* 2) Niente margini sugli item */
.wp-block-post-template > li {
  margin: 0 !important;
  padding: 0 !important;        /* spesso Gutenberg mette padding */
}

/* 3) Se dentro ogni item hai group/columns che aggiungono margine, azzera */
.wp-block-post-template > li > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* 4) Se la card è un Group con padding di default, neutralizza (solo se serve) */
.wp-block-post-template .destination-card.wp-block-group {
  padding: 0 !important;
}

body.page-template-align-wide-fix-trasparent .is-align-system > :where(:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright)),body.page-template-align-wide-fix-trasparent .is-align-system .alignwide{
    padding: 0px !important;
    
}

/* =========================
   HEADER: DARK DI DEFAULT
   (tutte le pagine NON trasparent)
========================= */

/* Pagine normali: header sempre dark */
body:not(.page-template-menu-trasparent):not(.page-template-align-wide-fix-trasparent):not(.page-template-menu-black) .header {
  background-color: #242424 !important;
}

/* Bordo sotto header (pagine normali) */
body:not(.page-template-menu-trasparent):not(.page-template-align-wide-fix-trasparent):not(.page-template-menu-black) .header__content {
  border-bottom: 1px solid rgba(255,255,255,0.12) !important;
}

/* Testi bianchi (pagine normali) */
body:not(.page-template-menu-trasparent):not(.page-template-align-wide-fix-trasparent):not(.page-template-menu-black) .header__logo,
body:not(.page-template-menu-trasparent):not(.page-template-align-wide-fix-trasparent):not(.page-template-menu-black) .header__quick,
body:not(.page-template-menu-trasparent):not(.page-template-align-wide-fix-trasparent):not(.page-template-menu-black) .header__quick a,
body:not(.page-template-menu-trasparent):not(.page-template-align-wide-fix-trasparent):not(.page-template-menu-black) .menu li a {
  color: #fff !important;
}

/* Hamburger bianco */
body:not(.page-template-menu-trasparent):not(.page-template-align-wide-fix-trasparent):not(.page-template-menu-black) .icon-hamburger span {
  background: #fff !important;
}

/* =========================
   TEMPLATE TRASPARENTI:
   - header trasparente in alto
   - dark quando scroll-down
========================= */

/* In alto: trasparente */
.page-template-menu-trasparent .header,
.page-template-align-wide-fix-trasparent .header,
.page-template-menu-black .header {
  background: transparent !important;
}

/* In alto: niente border (se lo vuoi pulito) */
.page-template-menu-trasparent .header__content,
.page-template-align-wide-fix-trasparent .header__content,
.page-template-menu-black .header__content {
  border-bottom: none !important;
}

/* Link bianchi in alto */
.page-template-menu-trasparent .menu li a,
.page-template-menu-trasparent .header__quick a,
.page-template-align-wide-fix-trasparent .menu li a,
.page-template-align-wide-fix-trasparent .header__quick a,
.page-template-menu-black .menu li a,
.page-template-menu-black .header__quick a {
  color: #fff !important;
}

/* Hamburger bianco anche sui template trasparenti */
.page-template-menu-trasparent .icon-hamburger span,
.page-template-align-wide-fix-trasparent .icon-hamburger span,
.page-template-menu-black .icon-hamburger span {
  background: #fff !important;
}

/* Quando scrolli: header torna dark */
.page-template-menu-trasparent.scroll-down .header,
.page-template-align-wide-fix-trasparent.scroll-down .header,
.page-template-menu-black.scroll-down .header {
  background-color: #242424 !important;
}

/* Quando scrolli: rimetti un bordo soft */
.page-template-menu-trasparent.scroll-down .header__content,
.page-template-align-wide-fix-trasparent.scroll-down .header__content,
.page-template-menu-black.scroll-down .header__content {
  border-bottom: 1px solid rgba(255,255,255,0.12) !important;
}

/* =========================
   MOBILE MENU PANEL: sempre dark
   (anche se header sopra è trasparente)
========================= */
@media (max-width: 1190px) {
  .menu {
    background-color: #242424 !important;
  }

  .menu li {
    border-bottom: 1px solid rgba(255,255,255,0.12) !important;
  }

  .menu li a {
    color: #fff !important;
  }
}