/* ============================================================
   EPW Pro — Styles
   Ultra-minimaliste · Inspiré supero.ch
   ============================================================ */

/* --- Variables par défaut ---------------------------------- */
.epw-wrapper {
  --epw-cols:    3;
  --epw-gap:     16px;
  --epw-radius:  0px;
  --epw-card-bg: #fff;
  --epw-text:    #111;
  --epw-anim-dur:  700ms;
  --epw-anim-ease: ease-out;
  --epw-cat-color: currentColor;
  --epw-pin-cols:  3;
}

/* --- Grid Masonry / Divided -------------------------------- */
.epw-grid {
  display: grid;
  grid-template-columns: repeat(var(--epw-cols), 1fr);
  gap: var(--epw-gap);
}

.epw-grid--list {
  grid-template-columns: 1fr;
}

/* --- Pinterest layout (CSS columns) ----------------------- */
.epw-grid--pinterest {
  display: block;
  column-count: var(--epw-pin-cols);
  column-gap: var(--epw-gap);
}
.epw-grid--pinterest .epw-card-wrap {
  break-inside: avoid;
  margin-bottom: var(--epw-gap);
}

/* --- Wide layout (alternating full-width) ----------------- */
.epw-grid--wide {
  display: flex;
  flex-direction: column;
  gap: var(--epw-gap);
}
.epw-grid--wide .epw-card-wrap:nth-child(odd)  .epw-card__inner { flex-direction: row; }
.epw-grid--wide .epw-card-wrap:nth-child(even) .epw-card__inner { flex-direction: row-reverse; }
.epw-grid--wide .epw-card__media { flex: 0 0 55%; }
.epw-grid--wide .epw-card__body  { flex: 1; padding: clamp(1.5rem, 4vw, 3rem); }

/* --- Card wrap (animation container) ---------------------- */
.epw-card-wrap {
  display: contents; /* transparent for grid */
}
.epw-grid--pinterest .epw-card-wrap,
.epw-grid--wide .epw-card-wrap {
  display: block;
}

/* --- Card base -------------------------------------------- */
.epw-card {
  background: var(--epw-card-bg);
  color: var(--epw-text);
  border-radius: var(--epw-radius);
  overflow: hidden;
  position: relative;
  transition:
    transform 0.35s var(--epw-anim-ease),
    box-shadow 0.35s var(--epw-anim-ease);
}

.epw-card__inner {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  height: 100%;
}

/* --- Glass effect ----------------------------------------- */
.epw-glass {
  background: rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(18px) saturate(1.6);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

/* --- Media area ------------------------------------------- */
.epw-card__media {
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.epw-card__img,
.epw-card__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--epw-anim-ease);
}
.epw-card__media-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transition: background 0.4s;
}

/* Hover zoom sur media */
.epw-hover-zoom:hover .epw-card__img,
.epw-hover-zoom:hover .epw-card__video {
  transform: scale(1.04);
}

/* --- Body ------------------------------------------------- */
.epw-card__body {
  padding: 1.25rem 1.25rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  flex: 1;
}

/* --- Category badge --------------------------------------- */
.epw-card__cat {
  display: inline-block;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--epw-cat-color);
}

/* --- Title ------------------------------------------------ */
.epw-card__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.35;
  transition: opacity 0.25s;
}
.epw-card:hover .epw-card__title {
  opacity: 0.7;
}

/* --- Excerpt --------------------------------------------- */
.epw-card__excerpt {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.6;
  opacity: 0.65;
}

/* --- Meta ------------------------------------------------- */
.epw-card__meta {
  display: flex;
  gap: 0.75rem;
  font-size: 0.75rem;
  opacity: 0.45;
  margin-top: auto;
  padding-top: 0.5rem;
}

/* --- Arrow ------------------------------------------------ */
.epw-card__arrow {
  display: inline-block;
  font-size: 1rem;
  margin-top: 0.75rem;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.3s, transform 0.3s var(--epw-anim-ease);
}
.epw-card:hover .epw-card__arrow {
  opacity: 1;
  transform: translateX(0);
}

/* ============================================================
   ANIMATIONS D'ENTRÉE (Intersection Observer)
   ============================================================ */

/* État initial — invisible */
.epw-card[data-epw-animate] {
  will-change: opacity, transform, clip-path;
}

/* Fade */
.epw-card.epw-anim-in--fade {
  opacity: 0;
  transition:
    opacity var(--epw-anim-dur) var(--epw-anim-ease),
    transform var(--epw-anim-dur) var(--epw-anim-ease);
}
.epw-card.epw-anim-in--fade.epw-visible {
  opacity: 1;
}

/* Fade + Up */
.epw-card.epw-anim-in--fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity var(--epw-anim-dur) var(--epw-anim-ease),
    transform var(--epw-anim-dur) var(--epw-anim-ease);
}
.epw-card.epw-anim-in--fade-up.epw-visible {
  opacity: 1;
  transform: none;
}

/* Fade + Zoom */
.epw-card.epw-anim-in--fade-zoom {
  opacity: 0;
  transform: scale(0.94);
  transition:
    opacity var(--epw-anim-dur) var(--epw-anim-ease),
    transform var(--epw-anim-dur) var(--epw-anim-ease);
}
.epw-card.epw-anim-in--fade-zoom.epw-visible {
  opacity: 1;
  transform: none;
}

/* Slide Left */
.epw-card.epw-anim-in--slide-left {
  opacity: 0;
  transform: translateX(-40px);
  transition:
    opacity var(--epw-anim-dur) var(--epw-anim-ease),
    transform var(--epw-anim-dur) var(--epw-anim-ease);
}
.epw-card.epw-anim-in--slide-left.epw-visible {
  opacity: 1;
  transform: none;
}

/* Slide Right */
.epw-card.epw-anim-in--slide-right {
  opacity: 0;
  transform: translateX(40px);
  transition:
    opacity var(--epw-anim-dur) var(--epw-anim-ease),
    transform var(--epw-anim-dur) var(--epw-anim-ease);
}
.epw-card.epw-anim-in--slide-right.epw-visible {
  opacity: 1;
  transform: none;
}

/* Reveal (clip-path) */
.epw-card.epw-anim-in--reveal {
  clip-path: inset(0 100% 0 0);
  transition: clip-path var(--epw-anim-dur) var(--epw-anim-ease);
}
.epw-card.epw-anim-in--reveal.epw-visible {
  clip-path: inset(0 0% 0 0);
}

/* ============================================================
   ANIMATIONS DE SORTIE
   ============================================================ */
.epw-card.epw-anim-out--fade.epw-out {
  opacity: 0;
  transition: opacity calc(var(--epw-anim-dur) * 0.5) var(--epw-anim-ease);
}
.epw-card.epw-anim-out--fade-zoom.epw-out {
  opacity: 0;
  transform: scale(0.96);
  transition:
    opacity calc(var(--epw-anim-dur) * 0.5) var(--epw-anim-ease),
    transform calc(var(--epw-anim-dur) * 0.5) var(--epw-anim-ease);
}
.epw-card.epw-anim-out--slide-up.epw-out {
  opacity: 0;
  transform: translateY(-20px);
  transition:
    opacity calc(var(--epw-anim-dur) * 0.5) var(--epw-anim-ease),
    transform calc(var(--epw-anim-dur) * 0.5) var(--epw-anim-ease);
}

/* ============================================================
   PAGINATION
   ============================================================ */
.epw-pagination {
  display: flex;
  justify-content: center;
  margin-top: 3rem;
}

.epw-load-more {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 2rem;
  border: 1px solid currentColor;
  background: transparent;
  cursor: pointer;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: opacity 0.25s;
  border-radius: var(--epw-radius);
}
.epw-load-more:hover { opacity: 0.6; }
.epw-load-more.is-loading .epw-load-more__text { opacity: 0.4; }

.epw-load-more__spinner {
  display: none;
  width: 14px;
  height: 14px;
  border: 1.5px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: epw-spin 0.6s linear infinite;
}
.epw-load-more.is-loading .epw-load-more__spinner { display: block; }

@keyframes epw-spin {
  to { transform: rotate(360deg); }
}

/* No posts */
.epw-no-posts {
  grid-column: 1 / -1;
  opacity: 0.45;
  text-align: center;
  padding: 3rem;
}

/* ============================================================
   LIST LAYOUT
   ============================================================ */
.epw-grid--list .epw-card__inner {
  flex-direction: row;
}
.epw-grid--list .epw-card__media {
  flex: 0 0 220px;
}
.epw-grid--list .epw-card__body {
  padding: 1.5rem;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .epw-grid { --epw-cols: var(--epw-cols-tablet, 2); }
  .epw-grid--pinterest { column-count: 2; }
  .epw-grid--wide .epw-card__media { flex: 0 0 48%; }
}

@media (max-width: 767px) {
  .epw-grid { --epw-cols: var(--epw-cols-mobile, 1); }
  .epw-grid--pinterest { column-count: 1; }
  .epw-grid--wide .epw-card__inner,
  .epw-grid--wide .epw-card-wrap:nth-child(even) .epw-card__inner {
    flex-direction: column;
  }
  .epw-grid--wide .epw-card__media { flex: none; }
  .epw-grid--list .epw-card__inner { flex-direction: column; }
  .epw-grid--list .epw-card__media { flex: none; }
}