#sample-websites { grid-template-columns: minmax(0, 1fr); }
#sample-websites > h2 { max-width: none; }
.sample-gallery { min-width: 0; }
.sample-project { padding: clamp(1rem, 3vw, 2.5rem); border: 1px solid var(--border-color); border-radius: var(--radius-lg); background: radial-gradient(ellipse at 50% 0, var(--accent-surface), transparent 65%), var(--surface); }
.sample-project + .sample-project { margin-top: 2rem; }
.sample-gallery.is-ready .sample-project { margin-top: 0; }
.sample-project-header { display: flex; flex-wrap: wrap; align-items: start; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; }
.sample-project-header h3 { font-size: var(--type-xl); margin: 0 0 .5rem; }
#sample-websites .sample-project-header p { margin: 0; max-width: 60ch; }
.sample-label { color: var(--accent); font: 400 var(--type-xs)/1.5 var(--mono); }
.sample-devices { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; align-items: end; }
.sample-device { margin: 0; min-width: 0; width: 100%; }
.sample-device figcaption { margin-top: 1rem; text-align: center; color: var(--muted); font: 400 var(--type-xs)/1.5 var(--mono); }
.sample-shell { position: relative; padding: .55rem; border: 1px solid var(--control-border); border-radius: .8rem; background: #161821; box-shadow: 0 12px 32px #0003; }
.sample-scroll { height: clamp(15rem, 25vw, 22rem); overflow-y: auto; overflow-x: hidden; border-radius: .25rem; background: #fff; scrollbar-width: thin; scrollbar-color: #777 #e6e6e6; overscroll-behavior-y: contain; }
.sample-scroll img { display: block; width: 100%; height: auto; max-width: 100%; pointer-events: none; user-select: none; }
.sample-monitor { padding-bottom: 2.25rem; }
.sample-monitor .sample-shell::after { content: ''; position: absolute; width: 20%; height: 1.5rem; background: #343743; bottom: -1.5rem; left: 40%; }
.sample-monitor .sample-shell::before { content: ''; position: absolute; width: 35%; height: .35rem; border-radius: .5rem; background: #737581; bottom: -1.8rem; left: 32.5%; }
.sample-tablet { max-width: 24rem; margin-inline: auto; }
.sample-tablet .sample-shell { border-radius: 1.25rem; padding: 1rem .6rem; }
.sample-tablet .sample-scroll { height: 24rem; border-radius: .5rem; }
.sample-phone { max-width: 13rem; margin-inline: auto; }
.sample-phone .sample-shell { padding: 1.1rem .45rem .75rem; border-radius: 1.75rem; }
.sample-phone .sample-shell::before { content: ''; position: absolute; top: .35rem; left: 38%; width: 24%; height: .3rem; background: #777986; border-radius: 1rem; }
.sample-phone .sample-scroll { height: 25rem; border-radius: 1rem; }
.sample-controls { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.5rem; }
.sample-arrow { min-width: 48px; min-height: 48px; padding: .5rem; border: 1px solid var(--control-border); border-radius: .75rem; color: var(--ink); background: var(--surface); font-size: 1.5rem; line-height: 1; }
.sample-arrow:hover { background: var(--accent-surface); }
.sample-status { min-width: 5ch; text-align: center; color: var(--muted); font: 400 var(--type-sm)/1.5 var(--mono); }
.sample-device-picker { display: flex; justify-content: center; gap: .5rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.sample-device-picker button { min-height: 44px; padding: .5rem .85rem; border: 1px solid var(--control-border); border-radius: .65rem; background: var(--surface); color: var(--ink); }
.sample-device-picker button[aria-pressed='true'] { background: var(--button-bg); color: var(--button-text); }
#sample-websites .sample-hint { margin: 1.25rem 0 0; text-align: center; max-width: none; color: var(--muted); font-size: var(--type-xs); }
@media (max-width: 767px) {
  .sample-gallery.is-ready .sample-device:not(.is-selected-device) { display: none; }
}
@media (min-width: 768px) {
  .sample-devices { grid-template-columns: minmax(0, 2.3fr) minmax(0, 1fr) minmax(0, .65fr); gap: clamp(.75rem, 2vw, 2rem); }
  .sample-tablet .sample-scroll { height: clamp(15rem, 25vw, 22rem); }
  .sample-phone .sample-scroll { height: clamp(13rem, 22vw, 19rem); }
  .sample-device-picker { display: none; }
}

.sample-monitor figcaption { margin-top: 2.25rem; }

/* Use the full card width for descriptions, independently of the demo label. */
.sample-project-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.sample-project-header > div { display: contents; }
.sample-project-header h3 { grid-column: 1; grid-row: 1; }
#sample-websites .sample-project-header p { grid-column: 1 / -1; grid-row: 2; max-width: none; }
.sample-project-header .sample-label { grid-column: 2; grid-row: 1; }
@media (max-width: 767px) {
  .sample-project-header { grid-template-columns: minmax(0, 1fr); }
  .sample-project-header .sample-label { grid-column: 1; grid-row: 3; }
}


/* Keep the gallery comfortable on laptop screens without scaling the page. */
@media (min-width: 768px) {
  .sample-gallery { width: 100%; max-width: 72rem; margin-inline: auto; }
  .sample-project { padding: 1.5rem; }
  .sample-project-header { margin-bottom: 1.25rem; gap: .5rem 1rem; }
  .sample-project-header h3 { font-size: clamp(1.5rem, 2.2vw, 2rem); }
  .sample-scroll, .sample-tablet .sample-scroll, .sample-phone .sample-scroll { height: clamp(10rem, 28dvh, 17rem); }
  .sample-device figcaption { margin-top: .75rem; }
  .sample-monitor figcaption { margin-top: 2rem; }
  .sample-controls { margin-top: 1rem; }
  #sample-websites .sample-hint { margin-top: .75rem; }
}
@media (min-width: 768px) and (max-height: 700px) {
  .sample-project { padding: 1rem 1.5rem; }
  .sample-project-header { margin-bottom: 1rem; }
  .sample-scroll, .sample-tablet .sample-scroll, .sample-phone .sample-scroll { height: clamp(8rem, 25dvh, 11rem); }
}

@media (min-width: 768px) {
  .sample-tablet { max-width: calc(28dvh * .72 + 1.2rem); }
  .sample-phone { max-width: calc(28dvh * .46 + 1rem); }
}
@media (min-width: 768px) and (max-height: 700px) {
  .sample-tablet { max-width: calc(25dvh * .72 + 1.2rem); }
  .sample-phone { max-width: calc(25dvh * .46 + 1rem); }
}

/* Reclaim the monitor stand space and align all three device frames. */
.sample-monitor { padding-bottom: 0; }
.sample-monitor .sample-shell::before, .sample-monitor .sample-shell::after { display: none; }
.sample-monitor figcaption { margin-top: .75rem; }
@media (min-width: 768px) {
  .sample-gallery { --sample-device-height: clamp(12.5rem, calc(28dvh + 2.5rem), 19.5rem); }
  .sample-devices { align-items: start; }
  .sample-shell { height: var(--sample-device-height); display: flex; flex-direction: column; }
  .sample-scroll, .sample-tablet .sample-scroll, .sample-phone .sample-scroll { height: auto; min-height: 0; flex: 1; }
  .sample-tablet { max-width: calc(var(--sample-device-height) * .72); }
  .sample-phone { max-width: calc(var(--sample-device-height) * .46); }
  .sample-device figcaption, .sample-monitor figcaption { margin-top: .75rem; }
}
@media (min-width: 768px) and (max-height: 700px) {
  .sample-gallery { --sample-device-height: clamp(10.5rem, calc(25dvh + 2.5rem), 13.5rem); }
}

/* Show the complete hero in the screenshot previews. */
@media (min-width: 768px) {
  .sample-gallery { --sample-device-height: clamp(24rem, 42vw, 33rem); }
}
@media (max-width: 767px) {
  .sample-phone .sample-scroll { height: 40rem; }
}


/* Match the portfolio card edges and size the screens from the desktop hero. */
@media (min-width: 768px) {
  .sample-gallery { max-width: none; margin-inline: 0; }
  .sample-gallery.is-ready { --sample-device-height: var(--sample-hero-frame-height, 18rem); }
}
@media (max-width: 767px) {
  .sample-phone .sample-scroll { height: 25rem; }
}