/*-- -------------------------- -->
<---          Gallery           -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #gallery-565 {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    #gallery-565 .cs-picture {
        width: 100%;
        height: auto;
        block-size: fit-content;
        /* height divided by width */
        /* aspect-ratio: 1.34328358; */
        display: block;
        position: relative;
        /* border: solid 1px blue; */
    }
    #gallery-565 .cs-picture img {
        position: static;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        object-fit: fill;
    }
    #post_caps {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    #post_caps .cs-picture {
        width: 100%;
        height: auto;
        block-size: fit-content;
        /* height divided by width */
        aspect-ratio: auto;
        display: block;
        position: relative;
        /* border: solid 1px blue; */
    }
    #post_caps .cs-picture img {
        position: static;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        object-fit: contain;
    }

    #colors {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    #colors .cs-picture {
         width: 100%;
        height: auto;
        block-size: fit-content;
        /* height divided by width */
        aspect-ratio: auto;
        display: block;
        position: relative;
        /* border: solid 1px blue; */
    }
    #colors .cs-picture img {
        position: static;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        object-fit: contain;
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #gallery-565 {
        flex-direction: row;
        justify-content: space-around;
    }
    #gallery-565 .cs-picture {
        /* 268px - 550px */
        height: clamp(16.75rem, 37vw, 34.375rem);
        aspect-ratio: initial;
        width:25%;
    }
    #post_caps {
        flex-direction: row;
        flex-wrap: wrap;
        background-color: #ced3d7;

    }
    #post_caps .cs-picture {
        height:80%;
        width:33%;
        aspect-ratio:1.34328358;

    }
}
/*-- -------------------------- -->
<---          Aluminum Colors           -->
<--- -------------------------- -*/
/* Layout */
.aluminum-colors{
  --gap: 28px;
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(3, minmax(0,1fr));
  align-items: start;
  margin: 40px auto;
  max-width: 1200px;
  padding: 0 16px;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: #2b2f33;
}
@media (max-width: 1100px){
  .aluminum-colors{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 720px){
  .aluminum-colors{ grid-template-columns: 1fr; }
}
.color-column h2{
  font-size: clamp(24px, 2.6vw, 36px);
  font-weight: 600;
  margin: 0 0 8px;
}
.color-column h3{
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 500;
  margin: 0 0 6px;
  color: #555e66;
}
.color-column p{
  margin: 0 0 16px;
  color: #6b737a;
}

/* Swatches */
.swatch-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
}
@media (max-width: 420px){
  .swatch-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
.swatch{
  position: relative;
  background: var(--bg, #ddd);
  border-radius: 6px;
  overflow: hidden;
  aspect-ratio: 16 / 10;           /* same feel as your screenshot */
  box-shadow: 0 0 0 1px rgba(0,0,0,.12) inset;
}
.swatch--border{
  box-shadow:
    0 0 0 1px rgba(0,0,0,.5) inset,
    0 1px 0 rgba(0,0,0,.04);
}
.swatch figcaption{
  position: absolute;
  inset: auto 10px 10px 10px;
  padding: 8px 10px 6px;
  border-radius: 6px;
  font-weight: 800;
  letter-spacing: .3px;
  color: #fff;
  text-shadow: 0 1px 1px rgba(0,0,0,.4);
  background: linear-gradient(to top, rgba(0,0,0,.30), rgba(0,0,0,0));
  pointer-events: none;
}
/* Ensure readable text on light tiles */
.swatch[style*="#ffffff"] figcaption,
.swatch[style*="#dfd7b3"] figcaption,
.swatch[style*="#b5a98d"] figcaption,
.swatch[style*="#c2c9cf"] figcaption,
.swatch[style*="#c5dbd7"] figcaption{
  color: #111;
  text-shadow: 0 1px 0 rgba(255,255,255,.6);
  background: linear-gradient(to top, rgba(255,255,255,.65), rgba(255,255,255,0));
}

/* Optional subtle “Sandtex” texture */
.swatch--texture{
  background:
    radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px) 0 0/4px 4px,
    radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px) 2px 2px/4px 4px,
    var(--bg, #353536);
}

/*-- -------------------------- -->
<---          PVC Colors           -->
<--- -------------------------- -*/

/* Layout */
.pvc-colors{
  max-width: 980px;
  margin: 40px auto;
  padding: 0 16px;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:#2b2f33;
}
.pvc-col h2{ font-size: clamp(24px, 3vw, 36px); margin:0 0 8px; font-weight:600; }
.pvc-col h3{ font-size: clamp(18px, 2.2vw, 22px); margin:0 0 14px; color:#5d6870; }

/* Grid of swatches */
.swatch-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:14px;
}
@media (max-width:640px){
  .swatch-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* Swatch tile */
.swatch{
  position:relative;
  background: var(--bg,#ddd);
  aspect-ratio: 16 / 11;            /* similar proportions to screenshot */
  border-radius:6px;
  overflow:hidden;
  box-shadow: 0 0 0 1px rgba(0,0,0,.12) inset;
}
.swatch--border{ box-shadow: 0 0 0 2px rgba(0,0,0,.55) inset; }

/* Optional image/texture swatch (Sequoia) */
.swatch--image{
  background:
    var(--img, none) center/cover no-repeat,
    /* fallback wood-like texture if image missing */
    repeating-linear-gradient( 90deg, rgba(0,0,0,.08) 0 2px, transparent 2px 6px),
    linear-gradient(#8a6a58, #6e4f43);
}

/* Labels */
.swatch figcaption{
  position:absolute;
  left:10px; right:10px; bottom:10px;
  font-weight:800;
  letter-spacing:.2px;
  color:#fff;
  text-shadow:0 1px 1px rgba(0,0,0,.45);
  background: linear-gradient(to top, rgba(0,0,0,.28), rgba(0,0,0,0));
  padding:6px 8px 4px;
  border-radius:6px;
  pointer-events:none;
}

/* Make labels dark on light tiles for contrast */
.swatch[style*="#ffffff"] figcaption,
.swatch[style*="#f3e2bd"] figcaption,
.swatch[style*="#b7a98a"] figcaption,
.swatch[style*="#bcc2c8"] figcaption{
  color:#121212;
  text-shadow:0 1px 0 rgba(255,255,255,.7);
  background: linear-gradient(to top, rgba(255,255,255,.7), rgba(255,255,255,0));
}