/* ============================================
   HORIZONTAL PAINTING LAYOUT
   Used by: summer-haze.html and any
   wide/panoramic painting page

   HTML structure:
   .painting__layout.painting__layout--horizontal
     .painting__left-group
       .painting__left > a > img
       .painting__bottom
         .painting__filmstrip > a > img (×3)
         .painting__right
   ============================================ */

/* --- Mobile base: single column --- */

.painting__layout--horizontal {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  box-sizing: border-box;
  border-top: 1px solid rgba(243,244,244,0.15);
}

.painting__layout--horizontal .painting__left-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
 
}

.painting__layout--horizontal .painting__left {
  width: 100%;
    /* height: auto; */
}

.painting__layout--horizontal .painting__left a {
  display: block;
  width: 100%;
  border: 1px solid rgba(255,255,255,0.12);
  transition: border-color 180ms ease;
  outline: none;
  text-decoration: none;
  overflow: hidden;
}

.painting__layout--horizontal .painting__left a:hover {
  border-color: var(--border-hover);
}

/* Painting image — always natural proportions */
.painting__layout--horizontal .painting__left img {
  width: 100%;
  height: auto;
  display: block;
  cursor: pointer;
  transition: transform 180ms ease;
 
}

.painting__layout--horizontal .painting__left img:hover {
  transform: scale(1.02);
}

/* Bottom section: filmstrip + text stacked on mobile */
.painting__layout--horizontal .painting__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
}

.painting__layout--horizontal .painting__filmstrip {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: var(--space-1);
  width: fit-content;
}

.painting__layout--horizontal .painting__right {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  width: 100%;
  color: var(--text-light);
}

/* --- 768px: filmstrip + text side by side --- */

@media (min-width: 768px) {

  .painting__layout--horizontal .painting__bottom {
    flex-direction: row;
    gap: var(--space-5);
    align-items: flex-start;
  }

  /* .painting__layout--horizontal .painting__filmstrip {
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    width: 88px;
    flex-shrink: 0;
    
  }

  .painting__layout--horizontal .painting__filmstrip img {
    width: 80px;
    height: 80px;
    object-fit: cover;
  } */
}