/* ============================================================
   page-offthehook.css
   Styles for the "Off The Hook" limited-edition art piece page.
   Shared styles live in shared.css / page-gallery1.css handles
   the editorial body copy and read-more link styling.
   ============================================================ */


/* ============================================================
   ARTWORK BYLINE
   Small line under the title — "By Tommy Aldridge"
   ============================================================ */
.art-byline {
  font-family:    'EB Garamond', serif;
  font-style:     italic;
  font-size:      16px;
  color:          rgba(240, 237, 232, 0.55);
  margin-top:     -12px;
  margin-bottom:  40px;
}


/* ============================================================
   HERO FRAME — the main artwork, centered and treated like a
   piece on a gallery wall. This is the visual focal point of
   the page, so it gets its own contained, centered wrapper
   instead of the full-bleed / cropped treatment used elsewhere
   on the site.
   ============================================================ */
.art-hero {
  display:         flex;
  justify-content: center;
  margin:          8px auto 20px;
}

.art-hero-frame {
  position:    relative;
  max-width:   860px;
  width:       100%;
  background:  #000;
  border:      1px solid rgba(201, 168, 76, 0.35);
  padding:     14px;
  box-shadow:  0 30px 80px rgba(0, 0, 0, 0.55);
}

.art-hero-frame img {
  display:    block;
  width:      100%;
  height:     auto;
  object-fit: contain;
}

/* small gold corner accents to reinforce the "framed piece" feel */
.art-hero-frame::before,
.art-hero-frame::after {
  content:    '';
  position:   absolute;
  width:      18px;
  height:     18px;
  border:     1px solid var(--gold);
  opacity:    0.7;
}
.art-hero-frame::before { top: -1px;    left: -1px;   border-right: none;  border-bottom: none; }
.art-hero-frame::after  { bottom: -1px; right: -1px;  border-left:  none;  border-top:    none; }

.art-caption {
  text-align:     center;
  font-family:    'Orbitron', sans-serif;
  font-size:      10px;
  font-weight:    600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color:          rgba(240, 237, 232, 0.4);
  margin-bottom:  60px;
}


/* ============================================================
   RELEASE VIDEO
   16:9 responsive embed, full container width — matches the
   .video-wrapper treatment on page-youtube.html so video
   sizing is consistent site-wide.
   ============================================================ */
.art-video-wrap {
  margin: 0 0 56px;
}

.art-video-wrapper {
  position:       relative;
  width:          100%;
  padding-bottom: 56.25%;   /* 16:9 */
  height:         0;
  overflow:       hidden;
  background:     #000;
  border:         1px solid rgba(201, 168, 76, 0.3);
}

.art-video-wrapper iframe {
  position: absolute;
  top:      0;
  left:     0;
  width:    100%;
  height:   100%;
  border:   none;
}


/* ============================================================
   EDITION DETAILS
   Quick-reference spec list — the info a collector or drummer
   scanning the page wants without reading the full paragraph.
   ============================================================ */
.art-specs {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap:                   28px;
  margin:                40px 0 56px;
  padding:               32px;
  background:            var(--mid);
  border:                1px solid rgba(201, 168, 76, 0.15);
}

.art-spec-label {
  font-family:    'Orbitron', sans-serif;
  font-size:      9px;
  font-weight:    600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color:          var(--gold);
  margin-bottom:  8px;
}

.art-spec-value {
  font-family: 'EB Garamond', serif;
  font-size:   17px;
  color:       rgba(240, 237, 232, 0.85);
  line-height: 1.4;
}


/* ============================================================
   SIGNING PROCESS GALLERY
   Two supporting photos of Tommy hand-signing each canvas —
   reinforces authenticity and the limited-edition story.
   ============================================================ */
.signing-gallery {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   20px;
  margin-top:             32px;
}

@media (max-width: 700px) {
  .signing-gallery { grid-template-columns: 1fr; }
}

.signing-photo-wrap {
  overflow: hidden;
  border:   1px solid rgba(201, 168, 76, 0.15);
}

.signing-photo-wrap img {
  width:        100%;
  aspect-ratio: 4 / 3;
  object-fit:   cover;
  display:      block;
  transition:   transform 0.6s ease;
}
.signing-photo-wrap:hover img { transform: scale(1.03); }

.signing-note {
  margin-top:  18px;
  font-family: 'EB Garamond', serif;
  font-style:  italic;
  font-size:   15px;
  color:       rgba(240, 237, 232, 0.5);
}


/* ============================================================
   CTA BLOCK
   ============================================================ */
.art-cta {
  margin-top: 56px;
  text-align: center;
}

/* Formsite embed wrapper — constrained to 30% of the viewport
   on desktop so the form doesn't stretch full-width, but opens
   back up on mobile where 30% would be unusably narrow. */
.art-form-wrap {
  width:    30%;
  min-width: 320px;   /* keeps the form usable even on smaller desktop windows */
  margin:   0 auto;
}

@media (max-width: 900px) {
  .art-form-wrap {
    width:     100%;
    min-width: 0;
  }
}