/* ==========================================================
   article-embeds.css — Colony Creative
   Journal shortcode embeds: polaroids + product cards
   ========================================================== */

/* ── Polaroids ──
   A pile of prints on the desk. Overlap and angle variety scale with
   count: 2-3 sit almost side by side; 6-8 stack into a real pile. */

.colony-polaroids {
  --p-w: min(250px, 58%);
  --p-ol: -44px;
  /* Break out past the ~720px text column so the pile crosses the horizontal
     plane instead of obeying the body's strict measure. Centered on the column
     regardless of its padding, and capped to the viewport so it never causes a
     horizontal scrollbar. Applies to both the pile and the expanded grid. */
  width: min(920px, calc(100vw - 48px));
  margin-left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: clamp(2.25rem, 4vw, 3rem);
  margin-bottom: clamp(2.25rem, 4vw, 3rem);
  padding: 1rem 0;
  cursor: pointer;
}
.colony-polaroids:focus-visible {
  outline: 2px solid var(--text-primary);
  outline-offset: 6px;
  border-radius: 4px;
}

.colony-polaroids--4,
.colony-polaroids--5 {
  --p-w: 215px;
  --p-ol: -90px;
}

.colony-polaroids--6,
.colony-polaroids--7,
.colony-polaroids--8 {
  --p-w: 195px;
  --p-ol: -110px;
}

.colony-polaroid {
  background: #fafafa;
  padding: 10px 10px 42px;
  box-shadow: var(--shadow-md);
  width: var(--p-w);
  flex-shrink: 0;
  margin: 0;
  position: relative;
  z-index: var(--z, 1);
  /* Angle + drift + stacking order are set per print by article-embeds-anim.js,
     freshly randomized on every page load. The PHP ships sensible inline
     fallbacks so the pile still looks organic with JS disabled. */
  transform: rotate(var(--rot, 0deg)) translate(var(--tx, 0px), var(--ty, 0px));
  /* Only the transform eases. The layout switch (flex pile <-> grid) snaps
     instantly — animating width/margin across that switch made the prints
     briefly blow up to full-row width on collapse. */
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.colony-polaroid + .colony-polaroid {
  margin-left: var(--p-ol);
}

.colony-polaroid img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  border-radius: 0;
  border: none;
  filter: saturate(0.88) contrast(1.06) sepia(0.1);
}

.colony-polaroids--mono .colony-polaroid img {
  filter: grayscale(1) contrast(1.08);
}

.colony-polaroid figcaption {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 12px;
  font-family: 'DM Mono', monospace;
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #555555;
  text-align: center;
  margin: 0;
}

/* Subtle hover on the resting pile: lift a few pixels, keep the angle */
.colony-polaroids:not(.is-expanded) .colony-polaroid:hover {
  transform: rotate(var(--rot, 0deg)) translate(var(--tx, 0px), calc(var(--ty, 0px) - 6px));
}

/* ── Expanded: click any print to spread the pile into a clean grid so
   every full photo is visible; click again to restack. ── */
.colony-polaroids.is-expanded {
  display: grid;
  /* Mobile-first default: 2-up. Column count is refined per print-count
     below so nothing ever lands as a lonely orphan in the last row.
     Width + centering are inherited from the base rule's breakout. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.75rem, 2vw, 1.25rem);
  justify-items: center;
  align-items: start;
}

/* A single print shouldn't be forced into a column grid. */
.colony-polaroids--1.is-expanded {
  grid-template-columns: minmax(0, 1fr);
}

.colony-polaroids.is-expanded .colony-polaroid {
  width: 100%;
  max-width: 240px;
  margin: 0;
  transform: none;
  z-index: 1;
}
.colony-polaroids.is-expanded .colony-polaroid img {
  aspect-ratio: auto;
  object-fit: contain;
  max-height: 48vh;
}

/* Wider screens: go up to 3-up, but keep the counts that divide better as
   2-wide so they stay balanced:
     1 -> 1        2 -> 2×1      3 -> 3        4 -> 2×2
     5 -> 3,2      6 -> 3×2      7 -> 3,3,1    8 -> 3,3,2   */
@media (min-width: 561px) {
  .colony-polaroids.is-expanded {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .colony-polaroids--1.is-expanded {
    grid-template-columns: minmax(0, 1fr);
  }
  .colony-polaroids--2.is-expanded,
  .colony-polaroids--4.is-expanded {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* 7 prints leaves one print alone on the last row (3,3,1) — nudge it to
     the middle column so it reads centered rather than stranded left. */
  .colony-polaroids--7.is-expanded .colony-polaroid--7 {
    grid-column: 2;
  }
}

/* ── Product / project cards ── */

.colony-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  margin: clamp(2.25rem, 4vw, 3rem) 0;
}

.colony-cards--1 {
  grid-template-columns: minmax(0, 320px);
  justify-content: center;
}

.colony-cards--3 {
  grid-template-columns: repeat(3, 1fr);
}

.colony-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  transition: background 0.4s ease, border-color 0.4s ease;
}

a.colony-card:hover {
  background: var(--bg-surface-hover);
  border-color: var(--border-medium);
}

.colony-card__media {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--bg-elevated);
}

.colony-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: none;
  border-radius: 0;
  transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
}

a.colony-card:hover .colony-card__media img {
  transform: scale(1.04);
}

.colony-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 1.125rem 1.25rem 1.25rem;
  position: relative;
}

.colony-card__meta {
  font-family: 'DM Mono', monospace;
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.colony-card__title {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.35;
  color: var(--text-primary);
}

.colony-card__arrow {
  position: absolute;
  right: 1.25rem;
  bottom: 1.125rem;
  color: var(--text-muted);
  font-size: 0.875rem;
  transition: color 0.3s ease, transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

a.colony-card:hover .colony-card__arrow {
  color: var(--text-primary);
  transform: translateX(3px);
}

/* ── Responsive ── */

@media (max-width: 600px) {
  /* Bigger prints on phones so the resting pile doesn't read as cramped.
     Overlaps are tightened to match so each pile still fits inside a ~360px
     viewport without clipping. */
  .colony-polaroids {
    --p-w: min(212px, 50%);
    --p-ol: -70px;
  }

  .colony-polaroids--4,
  .colony-polaroids--5 {
    --p-w: 162px;
    --p-ol: -122px;
  }

  .colony-polaroids--6,
  .colony-polaroids--7,
  .colony-polaroids--8 {
    --p-w: 150px;
    --p-ol: -126px;
  }

  .colony-polaroid {
    padding-bottom: 34px;
  }

  .colony-cards,
  .colony-cards--3 {
    grid-template-columns: 1fr;
  }
}

/* ── Reduced motion ── */

@media (prefers-reduced-motion: reduce) {
  .colony-polaroid,
  .colony-card,
  .colony-card__media img,
  .colony-card__arrow {
    transition: none;
  }
}

/* ── No orphaned words ── */
.colony-card__title {
  text-wrap: pretty;
}