/* ============================================================
   Claudify Instagram
   Responsive heading with a seamless manual photo ticker
   ============================================================ */

/* ---- Section shell ---- */
.claudify-instagram {
  background-color: var(--bera-color-soft-neutral);
  padding: var(--sp-pt, 128px) 0 var(--sp-pb, 60px);
  display: flex;
  flex-direction: column;
  gap: 60px;
  overflow: hidden;
}

/* ============================================================
   Header: "Follow On" [two overlapping photo cards] "Instagram"
   ============================================================ */
.claudify-instagram__header {
  padding: 0 96px;
  display: flex;
  justify-content: center;
}

/* Single flex row: text | cards | text */
.claudify-instagram__header-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.claudify-instagram__heading-text {
  font-family: var(--sp-heading-font, 'Cormorant Garamond', Georgia, serif);
  font-size: var(--sp-heading-size, 48px);
  font-weight: var(--sp-heading-weight, 500);
  font-style: italic;
  line-height: 120%;
  letter-spacing: 0;
  color: #1A1C18;
  white-space: nowrap;
}

/* Wrap: no visual style on desktop — just a transparent flex item */
.claudify-instagram__photo-cards-wrap {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* ---- Two overlapping polaroid cards ---- */
/* Container size: card plus desktop/mobile overlap offsets */
.claudify-instagram__photo-cards {
  position: relative;
  width:  calc(var(--cig-card-desktop, 86px) + 42px);
  height: calc(var(--cig-card-desktop, 86px) + 19px);
  flex-shrink: 0;
}

/* Both cards: white polaroid frame */
.claudify-instagram__photo-card {
  position: absolute;
  width:  var(--cig-card-desktop, 86px);
  height: var(--cig-card-desktop, 86px);
  background: #ffffff;
  border-radius: 8px;
  padding: 6.5px;
  box-shadow: 0 2px 12px rgba(26, 28, 24, 0.18);
  box-sizing: border-box;
}

/* Right card (+10deg) — behind, offset 42px right / 19px down */
.claudify-instagram__photo-card--right {
  left: 42px;
  top: 19px;
  transform: rotate(10deg);
  z-index: 1;
}

/* Left card (-10deg) — on top, at origin */
.claudify-instagram__photo-card--left {
  left: 0;
  top: 0;
  transform: rotate(-10deg);
  z-index: 2;
}

/* Image wrapper inside card: fills the padded area */
.claudify-instagram__photo-card-inner {
  width: 100%;
  height: 100%;
  border-radius: 5px;
  overflow: hidden;
  background: #E8E8E1;
}

.claudify-instagram__photo-card-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ============================================================
   Auto-scrolling ticker
   ============================================================ */
.claudify-instagram__ticker {
  width: 100%;
  overflow: hidden;
  contain: layout paint;
}

/* Track: duplicated list scrolls left continuously */
.claudify-instagram__ticker-track {
  display: flex;
  gap: 32px;
  width: max-content;
  animation: claudify-instagram-scroll var(--cig-scroll-duration, 40s) linear infinite;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

/* Pause on hover */
.claudify-instagram__ticker:hover .claudify-instagram__ticker-track {
  animation-play-state: paused;
}

.claudify-instagram.is-ticker-paused .claudify-instagram__ticker-track {
  animation-play-state: paused;
  will-change: auto;
}

@keyframes claudify-instagram-scroll {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); } /* scroll first set, loop seamlessly */
}

/* ============================================================
   Image card
   ============================================================ */
.claudify-instagram__card {
  position: relative;
  width: 320px;
  height: 440px;
  border-radius: 16px;
  overflow: hidden;
  flex-shrink: 0;
  display: block;
  text-decoration: none;
  cursor: pointer;
  background-color: rgb(232, 232, 225); /* placeholder */
}

.claudify-instagram__card img {
  width: 101%;
  height: 101%;
  object-fit: cover;
  position: absolute;
  top: -0.5%;
  left: -0.5%;
  display: block;
  transition: transform 0.4s ease;
}

.claudify-instagram__card:hover img {
  transform: scale(1.03);
}

/* Dark overlay — hidden by default, fades in on hover */
.claudify-instagram__card-overlay {
  position: absolute;
  inset: 0;
  background: rgba(26, 28, 24, 0.6);
  z-index: 1;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.claudify-instagram__card:hover .claudify-instagram__card-overlay {
  opacity: 1;
}

/* Hover content: Instagram icon + handle, centred */
.claudify-instagram__card-content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 32px;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.claudify-instagram__card:hover .claudify-instagram__card-content {
  opacity: 1;
}

/* Instagram logo icon */
.claudify-instagram__card-icon {
  width: 40px;
  height: 40px;
  color: rgb(255, 255, 255);
  display: flex;
  align-items: center;
  justify-content: center;
}

.claudify-instagram__card-icon svg {
  width: 40px;
  height: 40px;
  display: block;
}

/* Handle: Jost Medium 22px */
.claudify-instagram__card-handle {
  font-family: 'Jost', sans-serif;
  font-size: 22px;
  font-weight: 500;
  font-style: normal;
  line-height: 140%;
  letter-spacing: 0;
  color: rgb(255, 255, 255);
  text-align: center;
}

/* ============================================================
   Tablet (750px – 989px)
   ============================================================ */
@media screen and (min-width: 750px) and (max-width: 989px) {
  .claudify-instagram {
    padding: 96px 0 64px;
    gap: 48px;
  }

  .claudify-instagram__header {
    padding: 0 64px;
  }

  .claudify-instagram__card {
    width: 260px;
    height: 360px;
  }
}

/* ============================================================
   Mobile (< 750px)
   ============================================================ */
@media screen and (max-width: 749px) {
  .claudify-instagram {
    --cig-scroll-duration: 60s;
    padding: 64px 0 48px;
    gap: 40px;
  }

  .claudify-instagram__header {
    padding: 0 20px;
  }

  /* Mobile: wrap layout — cards own row on top, both texts share row below */
  .claudify-instagram__header-row {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    row-gap: 22px;
    column-gap: 6px; /* ~1 word-space at 28px Jost Medium */
  }

  /* Wrap takes its own full row and centres the inner fixed-size cards */
  .claudify-instagram__photo-cards-wrap {
    order: -1;
    flex: 0 0 100%;
    display: flex;
    justify-content: center;
  }

  /* Inner cards: fixed size — absolute children now position correctly */
  .claudify-instagram__photo-cards {
    width:  calc(var(--cig-card-mobile, 64px) + 42px);
    height: calc(var(--cig-card-mobile, 64px) + 19px);
  }

  /* Cards use mobile size variable */
  .claudify-instagram__photo-card {
    width:  var(--cig-card-mobile, 64px);
    height: var(--cig-card-mobile, 64px);
    padding: 5px;
  }

  /* Both text spans share one row — letter-spacing reset; font-size driven by section slider */
  .claudify-instagram__heading-text {
    --sp-heading-size: 28px;
    letter-spacing: 0;
  }

  .claudify-instagram__card {
    width: 200px;
    height: 280px;
    border-radius: 12px;
  }

  .claudify-instagram__ticker-track {
    gap: 16px;
  }
}

/* Pause ticker scroll for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .claudify-instagram__ticker-track {
    animation: none;
    transform: none;
    will-change: auto;
  }

  .claudify-instagram__card img,
  .claudify-instagram__card-overlay,
  .claudify-instagram__card-content {
    transition: none;
  }

  .claudify-instagram__card:hover img {
    transform: none;
  }
}