/* ==========================================================================
   Page: home  (site/home/index.blade.php + site/home/sections/*)
   --------------------------------------------------------------------------
   Bento sections, top to bottom: hero · sector tiles · about · strengths ·
   quality · catalogue · contact + map.
   Shared card styles (.card, .card--photo, .tag, .bento) live in core/base.css.
   ========================================================================== */

/* ── Hero ────────────────────────────────────────────────────────────────── */
.home-hero { padding-top: var(--s-2); }
.home-hero__grid { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr auto; }
.home-hero__main { grid-row: span 2; min-height: clamp(480px, 26vw + 180px, 600px); max-height: calc(100vh - var(--header-h) - var(--s-6)); }
.home-hero__main img { object-position: 12% 50%; }   /* keep the building sign (left of the photo) in view */
.home-hero__title { margin-top: var(--s-4); max-width: 16ch; font-size: var(--fs-2xl); color: #fff; }
.home-hero__title span { display: block; margin-top: var(--s-3); max-width: 30ch; font-size: var(--fs-md); font-weight: 600; line-height: 1.5; color: var(--sky); }
.home-hero__text { max-width: 44ch; margin-top: var(--s-3); color: var(--on-dark-soft); }
.home-hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-5); }

.home-hero__fact { display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-5); }
.home-hero__big { font-family: var(--font-num); font-weight: 800; font-size: var(--fs-num); line-height: 0.95; letter-spacing: -0.03em; }
.home-hero__fact-label { font-weight: 700; font-size: var(--fs-md); }
.home-hero__fact-line { margin-top: var(--s-1); font-size: var(--fs-sm); color: rgb(32 57 74 / 0.75); }
.home-hero__fact-line strong { color: var(--navy); }

.home-hero__catalog { display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-5); }
.home-hero__catalog-mark { width: 42px; color: var(--lemon); }
.home-hero__catalog-title { font-size: var(--fs-lg); color: #fff; }
.home-hero__catalog-text { margin-block: var(--s-1) var(--s-4); font-size: var(--fs-sm); color: var(--on-dark-soft); }

/* ── Sector tiles ────────────────────────────────────────────────────────── */
.tiles { grid-template-columns: repeat(4, 1fr); }
.tile { display: flex; flex-direction: column; height: 100%; padding: 10px; border-radius: var(--r-lg); }
.tile__img { display: block; overflow: hidden; border-radius: var(--r-md); aspect-ratio: 4 / 3.4; background: var(--card-soft); }
.tile__img picture, .tile__img img { width: 100%; height: 100%; }
.tile__img img { object-fit: cover; transition: transform var(--t) var(--ease); }
.tile:hover .tile__img img { transform: scale(1.03); }
.tile__row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex: 1; padding: var(--s-4) var(--s-3) var(--s-2); }
.tile__name { display: block; font-weight: 700; font-size: var(--fs-md); }
.tile__text { display: block; margin-top: 2px; color: var(--ink-faint); font-size: var(--fs-xs); line-height: 1.55; }
.tile__go {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--page);
    transition: background-color var(--t-fast) var(--ease);
}
.tile:hover .tile__go { background: var(--lemon); }

/* ── About ───────────────────────────────────────────────────────────────── */
.home-about { grid-template-columns: 1.35fr 1fr; grid-template-rows: 1fr auto; }
.home-about__story { grid-row: span 2; }
.home-about__title { margin-top: var(--s-4); font-size: var(--fs-xl); }
.home-about__text { margin-top: var(--s-4); color: var(--ink-soft); font-size: var(--fs-md); }
.home-about__points { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3) var(--s-5); margin-block: var(--s-6); }
.home-about__points li { display: flex; align-items: flex-start; gap: var(--s-2); font-weight: 600; font-size: var(--fs-sm); }
.home-about__points .icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    margin-top: 0.1em;
    padding: 5px;
    border-radius: 50%;
    background: var(--lemon);
}
.home-about__photo { min-height: 320px; }
.home-about__place { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); }
.home-about__pin { font-size: 1.5rem; color: var(--lemon); }
.home-about__place-text { flex: 1; min-width: 12rem; font-weight: 600; }

/* ── Strengths ───────────────────────────────────────────────────────────── */
.home-strengths { grid-template-columns: repeat(4, 1fr); }
.home-strengths__card { display: flex; flex-direction: column; min-height: 240px; }
.home-strengths__no { font-family: var(--font-num); font-weight: 800; font-size: var(--fs-lg); color: var(--teal); }
.card--lemon .home-strengths__no { color: var(--navy); }
.home-strengths__title { margin-top: auto; padding-top: var(--s-6); font-size: var(--fs-md); }
.home-strengths__text { margin-top: var(--s-2); color: var(--ink-soft); font-size: var(--fs-sm); }
.card--lemon .home-strengths__text { color: rgb(32 57 74 / 0.8); }

/* ── Quality ─────────────────────────────────────────────────────────────── */
.home-quality { grid-template-columns: 2fr 1fr; }
.home-quality__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-3) var(--s-6); }
.home-quality__title { margin-top: var(--s-3); font-size: var(--fs-xl); }
.home-quality__text { max-width: 24rem; color: var(--ink-soft); }
.home-quality__steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-5); margin-block: var(--s-7) var(--s-6); }
.home-quality__icon {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: var(--r-md);
    background: var(--sky-soft);
    color: var(--navy);
}
.home-quality__icon .mark { width: 50%; }
.home-quality__steps li:first-child .home-quality__icon { background: var(--lemon); }
.home-quality__no { display: block; margin-top: var(--s-4); font-family: var(--font-num); font-weight: 700; font-size: var(--fs-xs); color: var(--teal); }
.home-quality__step { margin-top: 2px; font-size: var(--fs-md); }
.home-quality__step-text { margin-top: var(--s-1); color: var(--ink-soft); font-size: var(--fs-sm); }
.home-quality__photo { min-height: 420px; }

/* ── Catalogue ───────────────────────────────────────────────────────────── */
.home-catalog { grid-template-columns: 1fr 2fr; }
.home-catalog__photo { min-height: 380px; }
.home-catalog__card { display: flex; flex-direction: column; justify-content: center; }
.home-catalog__mark { position: absolute; inset-inline-end: -50px; bottom: -70px; width: 300px; color: rgb(32 57 74 / 0.07); }
.home-catalog__title { position: relative; margin-top: var(--s-4); max-width: 18ch; font-size: var(--fs-xl); }
.home-catalog__text { position: relative; max-width: 34rem; margin-top: var(--s-3); color: rgb(32 57 74 / 0.8); font-size: var(--fs-md); }
.home-catalog__actions { position: relative; display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-6); }

/* ── Contact + map ───────────────────────────────────────────────────────── */
.home-contact { grid-template-columns: 1fr 1.2fr; }
.home-contact__title { font-size: var(--fs-xl); }
.home-contact__text { margin-top: var(--s-3); color: var(--ink-soft); }
.home-contact__list { display: grid; gap: var(--s-3); margin-block: var(--s-6); font-size: var(--fs-sm); }
.home-contact__list li { display: flex; align-items: flex-start; gap: var(--s-3); }
.home-contact__list .icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    padding: 7px;
    border-radius: 50%;
    background: var(--card-soft);
    color: var(--navy);
}
.home-contact__list li > :not(.icon) { padding-top: 0.25em; }
.home-contact__list a:hover { color: var(--teal); }
.home-contact__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.home-contact__map { min-height: 420px; }
.home-contact__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
    .home-hero__grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
    .home-hero__main { grid-column: 1 / -1; grid-row: auto; max-height: none; }
    .tiles, .home-strengths { grid-template-columns: 1fr 1fr; }
    .home-about, .home-quality, .home-catalog, .home-contact { grid-template-columns: 1fr; grid-template-rows: auto; }
    .home-about__story { grid-row: auto; }
    .home-quality__steps { grid-template-columns: 1fr 1fr; gap: var(--s-6) var(--s-5); }
    .home-quality__photo, .home-catalog__photo { min-height: 260px; }
    .home-catalog__photo { order: 1; }
}

@media (max-width: 575.98px) {
    .home-hero__grid { grid-template-columns: 1fr; }
    .home-hero__main { min-height: 540px; max-height: none; }
    .home-hero__actions .btn { flex: 1 1 auto; }
    .home-hero__main.card--photo.has-text::after { background: linear-gradient(to top, rgb(16 30 40 / 0.94), rgb(16 30 40 / 0.72) 55%, rgb(16 30 40 / 0.62)); }
    .tile__go { display: none; }
    .tile__row { padding-inline: var(--s-2); }
    .tile__text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .home-about__points { grid-template-columns: 1fr; }
    .home-strengths { grid-template-columns: 1fr; }
    .home-strengths__card { min-height: 0; }
    .home-strengths__title { padding-top: var(--s-4); }
    .home-contact__map { min-height: 300px; }
}