/* 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;
}

/* Avatar helper for small circular images */
.avatar { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; display: inline-block; }

/* 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; }

/* Header hero */
.site-header--hero { position: relative; overflow: hidden; border-radius: var(--site-header-hero-radius, 0); }
.site-header__hero-img { width: 100%; height: clamp(14rem, 45vh, 24rem); object-fit: cover; display: block; }
.site-header__overlay { position: absolute; inset: 0; background: var(--header-hero-overlay, rgba(0,0,0,.5)); }
.site-header__inner { position: absolute; inset: 0; display: flex; align-items: flex-start; padding: clamp(1.5rem, 2.5vw, 2.5rem) 0; }
.site-header__inner > .navbar { width: 100%; }
.site-header__inner .navbar .navbar-nav .nav-link { color: rgba(255,255,255,0.85); }
.site-header__inner .navbar .navbar-nav .nav-link:hover { color: #fff; }
.site-header__inner .navbar .navbar-toggler { border-color: rgba(255,255,255,.4); }
.site-header__inner .navbar .navbar-toggler-icon { filter: brightness(10); }
.site-header__inner .navbar .navbar-brand { color: #fff; }

/* Header carousel */
.site-header--carousel { position: relative; overflow: hidden; border-radius: var(--site-header-carousel-radius, 0); }
.site-header__carousel { position: relative; }
.site-header--carousel .carousel-item { height: var(--header-carousel-height, clamp(16rem, 50vh, 28rem)); }
.site-header__carousel-img { width: 100%; height: 100%; object-fit: cover; }
.site-header__carousel-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,0) 60%); pointer-events: none; }
.site-header__carousel-nav { position: absolute; inset: 0; display: flex; align-items: flex-start; padding: clamp(1.5rem, 2.5vw, 2.5rem) 0; z-index: 2; pointer-events: none; }
.site-header__carousel-nav .navbar { width: 100%; pointer-events: auto; }
.site-header__brand-logo { max-height: clamp(32px, 6vh, 56px); width: auto; }


/* 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%); }
}