/*
 * The only stylesheet added on top of the original theme CSS.
 *
 * The five WordPress pages are now sections stacked in the middle column, so
 * all this does is make anchor jumps glide and stop section tops from landing
 * underneath the sticky mobile header.
 */

/*
 * `.page-wrapper` is the scrolling element, not the window — reset.css pins it
 * with `position: fixed; height: 100vh; overflow-y: auto`. Smooth scrolling has
 * to be declared on the element that actually scrolls, so that is where it goes
 * (`html` is kept for good measure).
 */
html,
.page-wrapper {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html,
  .page-wrapper {
    scroll-behavior: auto;
  }
}

/*
 * Each section is wrapped in `.sp-section` to give it an anchor target. That
 * wrapper sits inside `.elementor-widget-wrap`, which Elementor lays out with
 * `display: flex`, and Elementor sizes its own children through
 * `.elementor-element { flex-basis: var(--flex-basis) }`. A plain div gets none
 * of that, so it would size to max-content and burst out of its column — hence
 * the explicit full-width flex basis here.
 */
.sp-section {
  width: 100%;
  flex: 0 0 100%;
  scroll-margin-top: 30px;
}

/* Below 1400px the sticky header overlays the top of the page. */
@media (max-width: 1399px) {
  .sp-section {
    scroll-margin-top: 110px;
  }
}

/*
 * Resume blocks (Experience, Education, Working Skills, Knowledges) are stacked
 * full width instead of paired into columns, so they need their own vertical
 * rhythm — the theme's spacing came from the two-column gutter that no longer
 * exists.
 */
/* `.elementor-container` is a flex row that does not wrap, so two full-width
   columns inside one would shrink to share it. These make them stack. */
.elementor-container.sp-stack {
  flex-wrap: wrap;
}

.sp-stack > .sp-block {
  width: 100%;
  flex: 0 0 100%;
}

.sp-block + .sp-block {
  margin-top: 40px;
}

/* The theme zeroes `.card-text`'s margin, so anything after the place line
   would sit flush against it. */
.bostami-card-item .card-description,
.bostami-card-item .card-keywords {
  margin-top: 10px;
}

.bostami-card-item .card-keywords {
  font-size: 14px;
  opacity: 0.85;
}

/* Role summaries are written to fit, but this keeps a long one from stretching
   the card — four lines and then it truncates. */
.bostami-card-item .card-description {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
}

/* Character counter under the contact form's message box. Turns red while the
   message is still short of the minimum. */
.sp-char-count {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  color: var(--body-text, #6b7280);
  opacity: 0.75;
}

.sp-char-count[data-short="true"] {
  color: #dc3232;
  opacity: 1;
}

/*
 * Client logos. bostami-toolkit.css pins these to `height: 62px !important`
 * with no width limit, which makes the wider marks (ManyPlates is 4.2:1) spill
 * out of their slide. Constrain to the slide and scale to fit instead.
 */
.bostami-client-slider-logo {
  height: auto !important;
  max-height: 60px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  /* the theme's 15px each side ate into the space the wordmarks need */
  padding: 0 8px !important;
}

/*
 * Widen the content wrapper on desktop. post-149.css caps the stretched
 * section's container at 1450px at top level, and steps it down to 1110px below
 * 1366px — so this override is scoped above that breakpoint to leave the
 * responsive step alone. Four classes deep to outrank
 * `.elementor-149 .elementor-element.elementor-element-7ec232b > .elementor-container`.
 *
 * The three columns are percentage-based (29% / 58.3% / 12%), so they all widen
 * proportionally.
 */
@media (min-width: 1367px) {
  .elementor
    .elementor-section.elementor-section-stretched
    > .elementor-container {
    /*
     * Grow up to 1600px, but never so far that the gutter disappears — the
     * theme kept ~75px each side, and a plain `max-width: 1600px` made the
     * content run edge-to-edge on a 1600px display.
     *
     * `max(1450px, …)` means this only ever widens: below the point where 1600
     * fits with a gutter it falls back to the theme's own 1450px, which the
     * available width then caps exactly as before.
     */
    max-width: max(1450px, min(1600px, 100cqw - 150px));
  }
}

/*
 * Blog hero images. Only two of the theme's images are banner-shaped; the rest
 * are square, and left to themselves they render small and left-aligned while
 * the wide ones fill the column. A fixed height with `cover` gives every post
 * the same banner regardless of the source aspect ratio.
 *
 * `:not(.sp-logo-plate)` keeps this away from the portfolio detail pages, which
 * reuse `.h1-modal-img` for a centred, contained logo.
 */
.h1-modal-img:not(.sp-logo-plate) img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  object-position: center;
}

/*
 * Portfolio cards show brand logos rather than photography. The logos are dark
 * artwork on a transparent background, so they need a white plate behind them —
 * on the card's pastel fill they would be unreadable.
 *
 * The four logos have wildly different aspect ratios (219×52 to 2481×1018), so
 * the plate is a fixed-height box and each logo is contained inside it rather
 * than stretched to fill.
 */
/*
 * Every card is the same size so the grid reads as an even set of tiles rather
 * than a ragged masonry wall. The card is a fixed-height flex column and the
 * logo plate takes whatever is left after the text, so a one-line subtitle and
 * a two-line one still produce identical cards.
 */
.fillter-item {
  display: flex !important;
  flex-direction: column;
  height: 320px;
  background: #ffffff;
  /* The middle column is white too, so the card needs an edge — but only just.
     The shadow does most of the lifting; the border is barely there. */
  border: 1px solid rgba(17, 24, 39, 0.05);
  box-shadow: 0 6px 18px rgba(17, 24, 39, 0.07);
  transition: box-shadow 0.25s ease, border-color 0.25s ease,
    transform 0.25s ease;
}

.fillter-item:hover {
  border-color: rgba(17, 24, 39, 0.08);
  box-shadow: 0 12px 30px rgba(17, 24, 39, 0.12);
  transform: translateY(-3px);
}

/*
 * The tile at the top of the card. Its tint comes from the project's `logoBg`
 * as an inline style, so each brand keeps its own colour while the card body
 * below stays white.
 */
.sp-logo-plate {
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  min-height: 0;
  padding: 24px;
}

.sp-logo-plate img {
  width: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Shown in place of a logo for projects that don't have one yet. */
.sp-logo-fallback {
  font-size: 22px;
  font-weight: 600;
  color: var(--heading-black, #1d1d1d);
  text-align: center;
}

/* The detail page's plate is wider, so it can afford more height. */
.h1-modal-img.sp-logo-plate {
  height: 240px;
}

/*
 * The theme's checkmark list (`.blog-details-list-item-wrap`) sets
 * `line-height: 46px`, which assumes every item fits on one line — a wrapped
 * item ends up with a 46px gap mid-sentence. These make it wrap properly:
 * normal leading, and the checkmark lifted out of the text flow so the second
 * line aligns under the first rather than under the badge.
 */
.h1-modal-paragraph .blog-details-list-item-wrap li {
  line-height: 1.7;
  margin-bottom: 12px;
  padding-left: 28px;
  position: relative;
}

.h1-modal-paragraph .blog-details-list-item-wrap li::before {
  position: absolute;
  left: 0;
  top: 4px;
  margin-right: 0;
}

.h1-modal-paragraph .blog-details-list-item-wrap li:last-child {
  margin-bottom: 0;
}

/* Skill groups sit two to a row; `height: 100%` keeps the pair in each row the
   same height regardless of how long their lists are. */
.skill-group-wrap .col-md-6 {
  margin-bottom: 20px;
}

.skill-group {
  height: 100%;
}

/* reset.css strips `list-style`, `padding` and `margin` off every ul and li on
   the page, so the highlight bullets have to be put back by hand. */
.bostami-card-item .card-highlights {
  margin: 12px 0 0;
  padding-left: 20px;
  list-style: disc;
}

.bostami-card-item .card-highlights li {
  list-style: inherit;
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 8px;
}

.bostami-card-item .card-highlights li:last-child {
  margin-bottom: 0;
}

/*
 * The /blog/[id] and /portfolio/[id] pages show the same content the modals
 * showed, and every rule for that content is scoped to
 * `.h1-modal-box .modal-dialog .modal-content .modal-body` (and the portfolio
 * equivalent). So the detail pages carry that same class chain to inherit the
 * typography, minus the `.modal` class itself — and these rules undo the parts
 * that made it a floating, scrollable dialog.
 */
.sp-detail,
.sp-detail .modal-dialog,
/* three classes deep so it outranks
   `.h1-modal-box .modal-dialog .modal-content { overflow-y: scroll }` */
.sp-detail .modal-dialog .modal-content {
  /* `.h1-modal-box` / `.portfolio-modal-box` are themselves the fixed, dimmed
     backdrop, so the box needs resetting as much as the dialog inside it. */
  position: static;
  max-width: none;
  width: auto;
  height: auto;
  max-height: none;
  overflow: visible;
  margin: 0;
  padding: 0;
  transform: none;
  pointer-events: auto;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/*
 * Elementor's frontend.js used to full-bleed this section by measuring the
 * viewport and writing inline `width`/`left` on it. That whole runtime is not
 * loaded here (see src/app/theme-styles.ts), so the same result is expressed in
 * CSS — which has the bonus of tracking viewport changes without a resize
 * handler.
 *
 * The selector needs both classes to outrank
 * `.elementor-section.elementor-section-stretched { width: 100% }` in
 * custom-frontend.min.css.
 *
 * Container units rather than `vw`: `.page-wrapper` scrolls, so `100vw` counts
 * the scrollbar and would push the section a few pixels off the left edge.
 * `100cqw` measures the full-width wrapper below, which is the width Elementor's
 * JS used to measure.
 */
.bostami-internal-area {
  container-type: inline-size;
}

.elementor-section.elementor-section-stretched {
  width: 100cqw;
  max-width: 100cqw;
  margin-left: calc(50% - 50cqw);
  margin-right: calc(50% - 50cqw);
}