/* css styles */
img.portrait {
  max-height: 800px;
  height: auto;
  width: auto;
  max-width: 100%;
  display: block !important;
  margin: 0 auto !important;
}

img.landscape-wide,
img.landscape-ultrawide,
img.landscape-ultra-wide {
  height: auto;
  display: block !important;
  margin-left: 50% !important;
  transform: translateX(-50%) !important;
}

img.landscape-wide {
  width: min(1000px, 92vw) !important;
}

img.landscape-ultrawide,
img.landscape-ultra-wide {
  width: min(1500px, 92vw) !important;
}

center {
  text-align: center;
}

/* Ensure grid images are square */
.quarto-grid-item .card-img-top img {
  width: 100%;
  height: auto !important;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* Reduce grid spacing */
.quarto-listing .list.grid {
  gap: 10px !important;
}

/* Navbar styling */
.navbar {
  background-color: #000 !important;
  border-bottom: 1px solid #fff !important;
}

.navbar,
.navbar a,
.navbar .navbar-brand,
.navbar .navbar-title,
.navbar .nav-link,
.navbar .bi,
.navbar i,
.navbar svg,
.navbar button {
  color: #fff !important;
  fill: #fff !important;
}

/* Invert background-image SVGs like the mobile hamburger menu icon */
.navbar .navbar-toggler-icon {
  filter: invert(1) brightness(100) !important;
}

/* Inline grid item title and date */
.quarto-grid-item .card-body {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  padding: 15px !important;
}

.quarto-grid-item .card-title {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  margin-bottom: 0 !important;
  font-size: 1rem !important; /* same as body text */
  flex: 1 1 auto;
  margin-right: 15px;
}

.quarto-grid-item .card-attribution {
  flex: 0 0 auto;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  text-align: right;
  font-size: 0.9rem !important; /* slightly smaller for the date */
}

/* Animated Link Underline for body text */
p a, li a, blockquote a {
  text-decoration: none !important;
  background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor);
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat, no-repeat;
  background-size: 100% 1px, 0% 3px;
  transition: background-size 0.3s ease-out;
}

p a:hover, li a:hover, blockquote a:hover {
  background-size: 100% 1px, 100% 3px;
}

/* Exclude links that wrap images */
p a:has(img), li a:has(img), blockquote a:has(img) {
  background-image: none !important;
}