/* ── Picture-Idea-Canvas Layout ──────────────────────────────────────── */

.pic-canvas-wrap {
  overflow-x: auto;
  margin: 40px 0;
}

.pic-canvas {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 200px 200px;
  min-width: 620px;
  border: 2px solid var(--night);
  background: var(--night);
  gap: 2px;
  overflow: visible;
}

/* ── Field base ── */
.pcf {
  background: #f5f5f3;
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 0;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  min-height: 120px;
}

/* ── Grid placement ── */
.pcf--playground  { grid-column: 1; grid-row: 1 / 3; }
.pcf--activities  { grid-column: 2; grid-row: 1; }
.pcf--resources   { grid-column: 2; grid-row: 2; }
.pcf--pictures    { grid-column: 3; grid-row: 1 / 3; }
.pcf--story       { grid-column: 4; grid-row: 1; }
.pcf--presentation{ grid-column: 4; grid-row: 2; }
.pcf--customer    { grid-column: 5; grid-row: 1 / 3; }

/* ── Default state: icon + name visible ── */
.pcf-default {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: absolute;
  inset: 20px 18px;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.pcf-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  opacity: 0.85;
}

.pcf-icon svg {
  width: 100%;
  height: 100%;
}

.pcf-name {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 400;
  color: var(--night);
  line-height: 1.1;
  margin: 0;
}

/* ── Hover state: question + dims visible ── */
.pcf-hover {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: absolute;
  inset: 20px 18px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}

.pcf:hover .pcf-default,
.pcf.is-active .pcf-default,
.pcf--pictures:hover .pcf-inner .pcf-default,
.pcf--pictures.is-active .pcf-inner .pcf-default {
  opacity: 0;
  transform: translateY(-6px);
}

.pcf:hover .pcf-hover,
.pcf.is-active .pcf-hover,
.pcf--pictures:hover .pcf-inner .pcf-hover,
.pcf--pictures.is-active .pcf-inner .pcf-hover {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.pcf:hover { background: #ece9e4; }
.pcf.is-active { background: #ece9e4; }

.pcf-question {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--night);
  opacity: 0.75;
  line-height: 1.55;
}

.pcf-dims {
  margin-top: auto;
}

.pcf-dims-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  color: var(--night);
  display: block;
  margin-bottom: 2px;
}

.pcf-dims-list {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--night);
  opacity: 0.6;
  line-height: 1.6;
}

/* ── Pictures: overflow visible so heart can straddle the col border ── */
.pcf--pictures {
  overflow: visible;
}

/* inner clip wrapper keeps the default/hover animation inside the field */
.pcf-inner {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* ── You heart — centered on the left border of the Pictures field ── */
.pcf-you-heart {
  position: absolute;
  left: -42px;
  top: 50%;
  transform: translateY(-50%);
  width: 84px;
  height: 80px;
  z-index: 2;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.22));
  pointer-events: none;
}

.pcf-you-heart svg {
  width: 100%;
  height: 100%;
}

/* ── Canvas Reel ── */
.pic-reel-facade {
  position: relative;
  cursor: pointer;
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 9 / 16;
  max-width: 320px;
  margin: 0 auto;
  background: var(--night);
}

.pic-reel-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pic-reel-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s;
}

.pic-reel-play svg {
  width: 56px;
  height: 56px;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.4));
}

.pic-reel-facade:hover .pic-reel-play { opacity: 0.85; }

.pic-reel-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Mobile fallback: image + list ── */
@media (max-width: 1023px) {
  .pic-canvas-wrap { display: none; }

  .pic-canvas-mobile { display: block; }

  .pic-canvas-mobile-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: start;
  }

  .pic-canvas-mobile-img {
    width: 100%;
    height: auto;
    display: block;
    position: sticky;
    top: 24px;
  }

  .pic-canvas-fieldlist {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-top: 1px solid var(--border-light);
  }

  .pic-canvas-fieldlist-item {
    padding: 12px 0;
    border-bottom: 1px solid var(--border-light);
    display: flex;
    flex-direction: column;
    gap: 3px;
  }

  .pic-canvas-fieldlist-name {
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 400;
    color: var(--night);
  }

  .pic-canvas-fieldlist-question {
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--night);
    opacity: 0.7;
    line-height: 1.5;
  }
}

@media (max-width: 640px) {
  .pic-canvas-mobile-inner {
    grid-template-columns: 1fr;
  }

  .pic-canvas-mobile-img {
    position: static;
  }
}

@media (min-width: 1024px) {
  .pic-canvas-mobile { display: none; }
}

/* ── Old mobile override (no longer used for canvas, kept for safety) ── */
@media (max-width: 768px) {
  .pic-canvas {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: none;
    min-width: 0;
  }

  .pcf--playground  { grid-column: 1; grid-row: auto; }
  .pcf--activities  { grid-column: 2; grid-row: auto; }
  .pcf--resources   { grid-column: 1; grid-row: auto; }
  .pcf--pictures    { grid-column: 1 / 3; grid-row: auto; }
  .pcf--story       { grid-column: 1; grid-row: auto; }
  .pcf--presentation{ grid-column: 2; grid-row: auto; }
  .pcf--customer    { grid-column: 1 / 3; grid-row: auto; }

  /* on mobile show default state always, is-active toggles detail */
  .pcf-default { opacity: 1 !important; transform: none !important; position: static; inset: auto; }
  .pcf-hover   { opacity: 0; transform: translateY(6px); position: static; inset: auto; }
  .pcf.is-active .pcf-default { opacity: 0 !important; transform: translateY(-6px) !important; }
  .pcf.is-active .pcf-hover   { opacity: 1 !important; transform: none !important; }

  .pcf { min-height: 100px; }
  .pcf-name { font-size: 17px; }

  .pcf-you-heart { left: 50%; transform: translateX(-50%); bottom: 16px; }
}