/* Shared styles for the static desktop pages (index, about, contact). Loaded after index2.css. */

/* ---- Top navigation ---- */
ul.nav.navbar-nav {
  display: flex;
  align-items: center;
  float: none;
  margin: 0;
  padding: 14px 2vw 0;
  list-style: none;
}
ul.nav.navbar-nav > li { float: none; }
ul.nav.navbar-nav > li > a {
  color: #8b8b8b;
  padding: 10px 15px;
  font-size: 12px;
}
ul.nav.navbar-nav > li > a#home { color: #fff; font-weight: bold; padding-left: 0; }
ul.nav.navbar-nav > li > a.current { color: #fff; }
ul.nav.navbar-nav > li.push { margin-left: auto; }

/* ---- Project grid ---- */
#projects {
  min-width: 0;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 30px 22px;
  align-content: start;
  padding: 24px 4vw 40px 90px;
}
.p-card { cursor: pointer; color: #fff; }
.p-card:focus { outline: 1px solid #555; }
.p-thumb {
  width: 100%;
  aspect-ratio: 16 / 10;
  background: #111;
  overflow: hidden;
}
.p-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.p-card:hover .p-thumb img { opacity: 0.85; }
.p-title { margin: 10px 0 2px; font-size: 13px; font-weight: bold; color: #fff; }
.p-meta { margin: 0; font-size: 12px; color: #8b8b8b; }

/* ---- Project modal ---- */
.modal { overflow-y: auto; }
.modal-backdrop { opacity: 1 !important; background: #000; }
.modal-dialog { display: block; margin: 0 auto; }
.modal-content { background: transparent; border: 0; box-shadow: none; }
.modal-body { padding: 10px 30px 40px; color: #fff; }
#closeModal {
  float: none;
  display: block;
  margin: 14px 30px 0 auto;
  padding: 6px 0;
  background: none;
  border: 0;
  color: #fff !important;
  font-size: 14px;
  opacity: 1 !important;
  text-shadow: none;
}
.pv { display: flex; gap: 40px; align-items: flex-start; }
.pv-media { flex: 1 1 62%; min-width: 0; }
.pv-main { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; background: #111; }
.pv-thumbs { display: flex; gap: 10px; margin-top: 10px; }
.pv-thumb {
  width: 110px;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  cursor: pointer;
  opacity: 0.5;
  border: 1px solid transparent;
}
.pv-thumb.active, .pv-thumb:hover { opacity: 1; border-color: #fff; }
.pv-info { flex: 1 1 38%; min-width: 0; }
.pv-info h3 { margin: 0 0 18px; color: #fff; font-size: 22px; }
.pv-info dl { margin: 0 0 18px; }
.pv-info dt { color: #8b8b8b; font-weight: normal; font-size: 12px; float: left; clear: left; width: 80px; margin-bottom: 6px; }
.pv-info dd { margin: 0 0 6px 80px; color: #fff; font-size: 13px; }
.pv-awards { display: flex; gap: 14px; margin: 0 0 18px; flex-wrap: wrap; }
.pv-awards img { height: 56px; width: auto; }
.pv-info p { color: #fff !important; font-size: 13px; line-height: 1.6; }
@media (max-width: 991px) {
  .pv { flex-direction: column; }
  .pv-media, .pv-info { flex: none; width: 100%; }
}

/* ---- Contact page ---- */
.content-contact { padding: 60px 100px 40px; color: #fff; }
.content-contact h2 { margin: 0 0 30px; font-size: 22px; color: #fff; }
.content-contact dl { display: grid; grid-template-columns: 140px 1fr; row-gap: 14px; margin: 0; max-width: 560px; }
.content-contact dt { color: #8b8b8b; font-weight: normal; font-size: 13px; }
.content-contact dd { margin: 0; font-size: 14px; }
.content-contact a { font-size: 14px; }
.content-contact a { text-decoration: underline; }
@media only screen and (min-width: 992px) {
  .content-contact {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}
@media (max-width: 600px) {
  .content-contact { padding: 40px 6vw; }
  .content-contact dl { grid-template-columns: 100px 1fr; }
}

/* ---- Footer links ---- */
footer a { color: #fff; font-size: 12px; text-decoration: underline; }
footer .social { padding-left: 10vw; }

/* Footer layout (single row) */
h5 { color: #fff; }
.row-info-body { display: flex; gap: 70px; align-items: flex-start; width: 100%; height: auto; }
.column-info, .column-info-titles { width: auto; margin: 0; }
.row-info-body .social, .row-info-body .titles { margin-left: 0; padding-left: 0; width: auto; }
#git { left: 0; }
@media (max-width: 991px) {
  footer { margin-left: 5vw; }
  .row-info-body { flex-wrap: wrap; gap: 20px 50px; }
}

/* ---- Interface (home) page ---- */
.content-home {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 60vh;
  padding: 40px 6vw;
  color: #fff;
}
.content-home h1 { margin: 0 0 10px; font-size: 44px; font-weight: bold; color: #fff; }
.content-home p { margin: 0 0 28px; font-size: 16px; color: #8b8b8b; }
@media only screen and (min-width: 992px) {
  .content-home { flex: 1 1 auto; min-height: 0; }
}