/* Portfolio layout overrides (local) */
/* Goal: fill desktop screens nicely without turning text into a skinny column. */

:root{
  /* Wider content area for portfolio pages */
  --maxw: 1320px;
  --gutter: clamp(18px, 3.2vw, 56px);
  --proseMax: 1120px;
}

/* Make containers breathe on wide screens (less wasted side padding) */
.container{
  padding-left: var(--gutter) !important;
  padding-right: var(--gutter) !important;
}

/* Project pages use .prose; default 70ch is too narrow for this design */
.section.prose,
.prose{
  max-width: var(--proseMax) !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Ensure common content blocks don't re-introduce narrow max-widths */
.prose > p,
.prose > ul,
.prose > ol,
.prose > pre,
.prose > blockquote,
.prose > table,
.prose > figure,
.prose > h2,
.prose > h3,
.prose > h4{
  max-width: none !important;
}

/* Media should scale cleanly */
.prose img,
.prose video,
.prose iframe{
  max-width: 100% !important;
}

.prose iframe:not(.pdf-frame){
  height: auto;
}

/* PDF preview: show the first page comfortably on desktop */
.pdf-frame{
  /* Don't force display here: base CSS hides the iframe on mobile. */
  display:block;
  width:100% !important;
  max-width: var(--proseMax) !important;
  margin: 24px auto 0 !important;
  /*
    Give the embedded PDF viewer enough vertical space to show page 1.
    `min-height` prevents the default tiny iframe height.
  */
  height: min(1400px, calc(100vh - 220px)) !important;
  min-height: 900px !important;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* Mobile / touch: don't embed PDFs (many mobile browsers block/bug the viewer).
   Show the cover + link instead. */
@media (max-width: 768px), (hover: none) and (pointer: coarse){
  .pdf-frame{
    display:none !important;
    height:0 !important;
    min-height:0 !important;
    border:0 !important;
  }
  .pdf-cover{ display:block !important; }
}


/* Portfolio listing grid: better use of space on large screens */
#portfolio-list .grid{ gap: 26px; }
@media (min-width: 1200px){
  #portfolio-list .card{ grid-column: span 3 !important; } /* 4 per row */
}
@media (max-width: 980px){
  #portfolio-list .card{ grid-column: span 6 !important; } /* 2 per row */
}
@media (max-width: 560px){
  #portfolio-list .card{ grid-column: span 12 !important; } /* 1 per row */
}

/* Headings: keep them from feeling cramped */
.hero-title{ max-width: 24ch; }
@media (max-width: 820px){
  :root{ --proseMax: 100%; }
  .hero-title{ max-width: 18ch; }
}