.pdf-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.pdf-item {
  border: 1px solid #ccc;
  padding: 10px;
  background: #fff;
}

.pdf-item embed {
  width: 100%;
  height: 200px; /* not full page */
  border: none;
}
/* ---------- General mobile polish ---------- */
:root { --gap: 20px; }
a.button { padding: 10px 14px; line-height: 1.2; } /* bigger tap targets */

/* Wrap long filenames/titles so they don't overflow */
.pdf-title, .pdf-link a { word-break: break-word; overflow-wrap: anywhere; }

/* ---------- About page headshot (Markdown class or HTML) ---------- */
/* If you used the Markdown version: ?classes=wrap-left */
.wrap-left { float:left; margin:0 20px 20px 0; border-radius:8px; max-width:220px; }

/* If you used the HTML <img style="float:left"> version, normalize it here too */
img[style*="float:left"] { height:auto; }

/* On small screens, un-float and center the image */
@media (max-width: 640px) {
  .wrap-left,
  img[style*="float:left"] {
    float:none !important;
    display:block;
    margin:0 auto 16px auto !important;
    max-width:70% !important;
  }
}

/* ---------- PDF gallery cards ---------- */
.pdf-grid { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:var(--gap); }
@media (max-width: 1024px) { .pdf-grid { grid-template-columns:repeat(2, 1fr); } }
@media (max-width: 640px)  { .pdf-grid { grid-template-columns:1fr; } }

.pdf-card { border:1px solid rgba(0,0,0,.1); border-radius:12px; background:#fff; padding:10px; }
.pdf-embed { width:100%; height:220px; border:0; }
@media (max-width: 640px)  { .pdf-embed { height:160px; } }

/* Buttons in cards: bigger tap targets on mobile */
.pdf-actions .button { margin-right:8px; margin-top:6px; display:inline-block; }

/* ---------- Header: logo + site text ---------- */
/* If you added the logo + "saradavila.com" in the header wrapper, keep it flexible */
#logo { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
#logo img { height:50px; max-width:100%; }
@media (max-width: 640px) {
  #logo { justify-content:center; }
  #logo img { height:42px; }
}

/* ---------- Footer: horizontal, wraps on small screens ---------- */
#footer .container > div { display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; }
#footer img { height:28px; width:auto; }

/* Remove any injected label */
.mm-navbar::before { content: none !important; }

/* Hide the mobile menu title ("Grav") */
.mm-navbar .mm-title,
.mm-navbar__title,
.mm-title {
  display: none !important;
}