/* Basic, modern defaults to complement Bootstrap */
body {
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Media elements scale within containers */
img, svg, video, canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Figures */
figure { margin: 0; }
figcaption {
  font-size: .875rem;
  color: var(--bs-secondary-color, #6c757d);
  margin-top: .5rem;
}

/* Section rhythm (optional helper) */
.section { padding-block: 3rem; }
.section + .section { margin-top: 2rem; }

/* Hero helpers */
.hero { position: relative; min-height: 40vh; }
.hero__overlay { position: absolute; inset: 0; background: var(--hero-overlay, rgba(0,0,0,.35)); }
.hero__content { position: relative; z-index: 1; }

/* Features */
.features__icon { font-size: 2rem; line-height: 1; }

/* Cards: remove last paragraph spacing in bodies */
.card-text > :last-child { margin-bottom: 0; }

/* Portfolio styles */
.portfolio__thumb-wrap { width: 100%; min-width: 0; overflow: hidden; }
.portfolio__thumb { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .15s ease, filter .15s ease; }
/* Flex-based layout inside each portfolio item for consistent 30/70 split */
.portfolio__item { display: flex; gap: 1rem; align-items: flex-start; }
.portfolio__thumb-wrap { flex: 0 0 30%; max-width: 30%; }
.portfolio__text { flex: 1 1 0; min-width: 0; }
.portfolio__item:hover .portfolio__thumb { transform: scale(1.02); filter: brightness(1.02); }
.portfolio__item:hover .portfolio__title { text-decoration: underline; }

/* Theme-controlled container max-widths (Option 1, only .container) */
@media (min-width: 576px) { .container { max-width: var(--container-max-sm, 540px); } }
@media (min-width: 768px) { .container { max-width: var(--container-max-md, 720px); } }
@media (min-width: 992px) { .container { max-width: var(--container-max-lg, 960px); } }
@media (min-width: 1200px) { .container { max-width: var(--container-max-xl, 1140px); } }
@media (min-width: 1400px) { .container { max-width: var(--container-max-xxl, 1320px); } }

/* Adjustable image: full width on mobile; constrain width on md+ */
.adjustable-image { width: 100%; }
@media (min-width: 768px) {
  .adjustable-image { width: auto; max-width: var(--ai-width, 100%); }
}