/* =======================================================================
   GLOBAL
   ======================================================================= */

/* Masonry grid (used by shortcode on home and by taxonomy archive) */
.sgl-masonry {
  column-count: var(--sgl-cols, 3);
  column-gap: var(--sgl-gap, 24px);
}
@media (max-width: 1000px) { .sgl-masonry { column-count: 2; } }
@media (max-width: 640px)  { .sgl-masonry { column-count: 1; } }

.sgl-tile {
  display: inline-block;
  width: 100%;
  margin: 0 0 var(--sgl-gap, 24px);
  text-decoration: none;
}
.sgl-tile .ph img { width: 100%; height: auto; display: block; }
.sgl-tile .title  { display: block; margin-top: 8px; font-weight: 600; }

/* Series archive / shortcode container spacing */
.sgl-container { max-width: 1400px; margin: 0 auto; padding: 10vw 5.5% 20px; }
.sgl-h         { margin: 0 0 2px 0; font-weight: 600; font-size: 16px; }
.sgl-subh      { margin: 40px 0 16px 0; font-weight: 600; display: none; }

/* =======================================================================
   SINGLE ARTWORK LAYOUT
   ======================================================================= */

.sgl-single {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(480px, 1.5fr);
  gap: 5vw;
  max-width: 1600px;
  margin: 0 auto;
  padding: 10vw 5.5% 50px;
  align-items: start;
}
@media (max-width: 1024px) {
  .sgl-single { grid-template-columns: 1fr; }
  .sgl-col--right { order: 2; }
  .sgl-col--left  { order: 1; }
}
.sgl-artwork-image img { width: 100%; height: auto; display: block; }

/* ---- Force site font on single page (beats Lay’s inline defaults) ---- */
.sgl-single,
.sgl-single * { font-family: arial, helvetica, sans-serif; }
.sgl-single .lay-textformat-parent,
.sgl-single .lay-textformat-parent *,
.sgl-single ._Default,
.sgl-single ._Default_no_spaces,
.sgl-single .sgl-desc,
.sgl-single .sgl-desc * {
  font-family: arial, helvetica, sans-serif;
  line-height: inherit;
  letter-spacing: inherit;
}
.sgl-desc p{
    margin: 0;
}
/* =======================================================================
   SINGLE: RELATED GRID (NO MASONRY) — fixed 70px thumbs, 5px gap
   ======================================================================= */

/* turn off masonry + use flex wrap */
.sgl-single .sgl-masonry{
  display:flex;
  flex-wrap:wrap;
  gap:5px;                    /* 5px between items */
  column-count:initial;
  column-gap:6px;
  margin-top: 30px;
}

/* each tile is a fixed square; they wrap to the next line */
.sgl-single .sgl-tile{
  flex:0 0 70px;              /* fixed width */
  width:70px;
  margin:0;                   /* gap handles spacing */
  text-decoration:none;
  color:inherit;
}
.sgl-single .sgl-tile span.title {
    font-size: 16px;
    font-weight: 400 !important;
}
/* square box for image */
.sgl-single .sgl-tile .thumb-rel{
  position:relative;
  width:70px;
  height:70px;                /* fixed height to match width */
  overflow:hidden;
}

/* image fills the box uniformly */
.sgl-single .sgl-tile .ph,
.sgl-single .sgl-tile .ph img{
  width:100%;
  height:100%;
  display:block;
}

.sgl-single .sgl-tile .ph img{
  object-fit:cover;           /* consistent crop */
}


/* === Single page: offset the left column on desktop to line up with the image === */
@media (min-width: 1025px){
  /* tweakable knob: how far to push the left column down */
  .sgl-single{ --sgl-left-offset: 15vh; }          /* ~70% feel; adjust 10–16vh as needed */
  .sgl-col--left{ margin-top: var(--sgl-left-offset); }
}

/* very large screens can use a touch more offset */
@media (min-width: 1440px){
  .sgl-single{ --sgl-left-offset: 14vh; }
}

/* safety: no offset on smaller screens */
@media (max-width: 1024px){
  .sgl-col--left{ margin-top: 0; }
}


/* =======================================================================
   SHORTCODE GRID WRAPPER (used on homepage or pages)
   ======================================================================= */

/* adds same container spacing as .sgl-container */
.sgl-shortcode-wrap {
  max-width: 1600px;
  margin: 0 auto;
  padding: 10vw 5.5% 50px; /* same top/bottom as single */
  box-sizing: border-box;
}

/* ensure masonry grid doesn’t touch edges */
.sgl-shortcode-wrap .sgl-masonry {
  column-count: var(--sgl-cols, 3);
  column-gap: var(--sgl-gap, 24px);
  padding-bottom: var(--sgl-gap, 24px);
}
@media (max-width: 1000px) {
  .sgl-shortcode-wrap .sgl-masonry { column-count: 2; }
}
@media (max-width: 640px) {
  .sgl-shortcode-wrap .sgl-masonry { column-count: 1; }
}

/* consistent margins and spacing under each tile */
.sgl-shortcode-wrap .sgl-tile {
  display: inline-block;
  width: 100%;
  margin: 0 0 var(--sgl-gap, 24px);
  text-decoration: none;
  color: inherit;
}
.sgl-shortcode-wrap .sgl-tile .ph img {
  width: 100%;
  height: auto;
  display: block;
}
.sgl-shortcode-wrap .sgl-tile .title {
  display: block;
  margin-top: 8px;
  font-weight: normal;
  color: #6aff00;
}

/* add equal bottom spacing below the final row */
.sgl-shortcode-wrap {
  margin-bottom: 10vw; /* same rhythm as top spacing */
}


/* ------------------------------
   Hover titles — base
   ------------------------------ */
/* ------------------------------
   Hover titles (anti-flicker + taxonomy support)
   ------------------------------ */

/* Use the hover font at rest to avoid swap; fade only opacity/color */
.sgl-tile .title{
  font-family: var(--sgl-title-hover-font);
  color: var(--sgl-title-color);
  letter-spacing: var(--sgl-title-spacing);
  opacity: 0;
  transition: opacity .15s ease, color .15s ease;
  will-change: opacity;
  pointer-events: none;
}

/* Context-specific resting sizes (no size jump on hover) */
.sgl-shortcode-wrap .sgl-masonry .sgl-tile .title,
.sgl-container      .sgl-masonry .sgl-tile .title{
  font-size: var(--sgl-title-hover-size-grid);
}
.sgl-single .sgl-masonry .sgl-tile .title{
  font-size: var(--sgl-title-hover-size-single);
}

/* Show on hover — include taxonomy, shortcode, single and Lay’s selectors */
.sgl-shortcode-wrap .sgl-masonry .sgl-tile:hover .title,
.sgl-container      .sgl-masonry .sgl-tile:hover .title,
.sgl-single         .sgl-masonry .sgl-tile:hover .title,
.no-touchdevice .sgl-masonry .thumb:hover .title,
.touchdevice   .sgl-masonry .thumb:hover .title{
  opacity: 1;
  color: var(--sgl-title-hover-color) !important;
  font-family: var(--sgl-title-hover-font) !important;
  transition: color .15s ease, opacity .15s ease;
  font-weight: normal !important;
}


/* ------------------------------
   Beat Lay's global hover stylers
   ------------------------------ */
/* grid (shortcode/taxonomy/archive) */
.sgl-shortcode-wrap .sgl-masonry .sgl-tile:hover .title {
  color: var(--sgl-title-hover-color, #6aff00) !important;
  font-size: var(--sgl-title-hover-size-grid, 18px);
  font-weight: var(--sgl-title-weight, 600);
  letter-spacing: var(--sgl-title-spacing, 0);
}

/* single-page related thumbs */
.sgl-single .sgl-masonry .sgl-tile:hover .title {
  color: var(--sgl-title-hover-color, #6aff00) !important;
  font-size: var(--sgl-title-hover-size-single, 16px);
  font-weight: var(--sgl-title-weight, 600);
  letter-spacing: var(--sgl-title-spacing, 0);
}

/* ensure non-hover state still uses the configured sizes (prevents reflow) */
.sgl-shortcode-wrap .sgl-masonry .sgl-tile .title {
  font-size: var(--sgl-title-hover-size-grid, 18px);
}
.sgl-single .sgl-masonry .sgl-tile .title {
  font-size: var(--sgl-title-hover-size-single, 16px);
}


.sgl-nav{display:flex;gap:12px;align-items:center;justify-content:center;margin-top:24px}
.sgl-nav__link a{text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px}
.sgl-nav__state{opacity:.7}