/* ============================================
   ARTWORK DETAIL PAGE - TWO COLUMN LAYOUT
   Append this to your main styles.css
   ============================================ */

/* Artwork Detail Card - Uses .art_section structure */

h1 {
    display: block;
    padding: 0px;
    margin: 0;
    text-align: left;
    font-size: 60px;
    letter-spacing: 1px;
}
.art {
    padding: 0px 0px;
    text-align: center;
    background: var(--off-wh);
    max-width: 990px;
    margin: 20px auto;
}


/* Two Column Grid: 60% Image / 40% Details */
.artwork-two-column-grid {
  display: grid;
  grid-template-columns: 60% 40%;
  gap: 0;
}

/* Left Column - Image
   The image container itself stays at 4:3 (matches the 12"x9" source image)
   and is pinned to the top of its grid column. When the right-hand details
   column is taller, the column's grey background shows through below the
   image. */
.artwork-image-column {
    position: relative;
    overflow: hidden;
    background: var(--grey-lt, #f2f2f2);
    align-self: stretch;
    border-right: 1px solid #adadad;
}
.artwork-image-column .art-image-container {
  /* Inherits aspect-ratio: 4/3 from the base .art-image-container rule.
     We just need to make sure we don't stretch it to fill the column. */
  height: auto;
  cursor: pointer;
  transition: transform 0.2s ease;
}


.artwork-image-column:hover .enlarge-icon-overlay {
  opacity: 1;
}



/* Right Column - Details */
.artwork-details-column {
  display: flex;
  flex-direction: column;
}

/* Let main styles.css handle title, artist, specs, and price spacing */

/* Action buttons.
   Layout:
     [ Enlarge ]   [ How It's Made ]   <- 50/50, 20px gap
     [   Purchase (full width)   ]     <- 20px below the row above

   All three buttons share the same vertical metrics:
     • min-height: 46px
     • flex centering to keep the label vertically perfect
     • identical padding/font-size
   This neutralizes the height drift caused by .button vs
   .art-purchase-button having slightly different padding and the
   1.5px outline on the preview variant. */
.artwork-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

/* Preview row holds Enlarge + How It's Made side by side.
   Each button uses flex: 1 so it claims an equal share of the row.
   When the artwork has no "How It's Made" video, Enlarge stays alone
   in the row and naturally expands to fill 100%. */
.artwork-preview-buttons {
  display: flex;
  gap: 10px;
  flex-direction: column;
}

/* Shared sizing for every button in this column — preview pair AND
   purchase. Using a min-height + flex centering means the preview
   buttons (which carry a 1.5px border) end up exactly as tall as
   the borderless purchase button. */
.artwork-buttons .button{
  font-size: 14px;
  line-height: 1.2;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  text-align: center;
}









.artwork-preview-buttons .button {
  flex: 1;
}

.artwork-buttons .art-purchase-button {
  width: 100%;
}

/* Description */
.artwork-description-text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--grey-dk);
  margin-bottom: 20px;
  padding-top: 20px;
  border-top: 1px solid #e0e0e0;
}

/* Additional Info */
.artwork-additional-info {
  margin-top: auto;
  padding-top: 20px;
}

/* Info bullets.
   Each bullet is prefixed with a small black check icon (imgs/check_black.svg)
   rendered as a CSS background image — keeps the markup clean and lets us
   size the icon precisely against the surrounding text. */
.info-bullet {
  font-size: 14px;
  color: var(--grey);
  margin-bottom: 8px;
  line-height: 1.5;
  display: flex;
  align-items: center;
  gap: 8px;
}

.info-bullet::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  /* Inline SVG checkmark — embedded as a data: URI so this rule can't
     be broken by a missing file, wrong path, or server MIME quirk. The
     stroke color is hard-coded to black; if you ever want it to match
     the surrounding text color instead, switch to a mask-image approach
     (background-color: currentColor; mask-image: url(...);). */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='3,8.5 7,12.5 13,4.5'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  flex-shrink: 0;
}

/* Responsive - Mobile */
@media (max-width: 900px) {
  .artwork-two-column-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  
  .artwork-image-column .art-image-container {
    aspect-ratio: 4/3;
  }
  
  .artwork-details-column .art-purchase {
    padding: 24px;
  }
  
  .enlarge-icon-overlay {
    opacity: 1;
  }
  
  /* Stack the preview buttons (Enlarge / How It's Made) so each
     spans the full width of the column on mobile. flex-direction
     column overrides the default row layout; flex: 1 still gives
     each child the column's full width. */
  .artwork-preview-buttons {
    flex-direction: column;
  }
  
  .artwork-preview-buttons .button {
    width: 100%; padding: 10px 20px;
  }
  
  /* Mobile: pin the price to the top-right of the details column.
     The .art-purchase wrapper becomes the positioning context;
     the title/artist/specs reserve a right-side gutter so they
     don't run under the absolute-positioned price. Buttons below
     stay full-width because the gutter is on the text rows only. */
  .artwork-details-column .art-purchase {
    position: relative;
  }
  
  .artwork-details-column .art-purchase .art-title,
  .artwork-details-column .art-purchase .art-artist,
  .artwork-details-column .art-purchase .art-specs {
    padding-right: 110px;
  }
  
  .artwork-details-column .art-purchase .art-purchase-price {
    position: absolute;
    top: 24px;
    right: 24px;
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    text-align: right;
    white-space: nowrap;
  }
}

/* Tablet */
@media (max-width: 1200px) and (min-width: 901px) {
  .artwork-two-column-grid {
    grid-template-columns: 55% 45%;
  }
}


@media only screen and (max-width: 800px) {
    .art_container {
        padding: 0 20px 0px;
    }
}

.sold-text {

    text-align: left;
    
}