/* ============================================================
   HORIZON MUNDI — layout.css
   Container, sezioni, grid, split 50/50
   ============================================================ */

/* ─── 1. Sezioni generiche ───────────────────────────────── */
.hm-section {
    padding-block: var(--hm-space-24); /* 96px */
}

.hm-section--sm {
    padding-block: var(--hm-space-16); /* 64px */
}

.hm-section--lg {
    padding-block: var(--hm-space-32); /* 128px */
}

/* ─── 2. Sfondi sezione ──────────────────────────────────── */
.hm-positioning {
    background-color: var(--hm-white);
}

.hm-markets {
    background-color: var(--hm-dark);
}

.hm-how {
    background-color: var(--hm-white);
}

/* ─── 3. Section header ──────────────────────────────────── */
.hm-section-header {
    margin-bottom: var(--hm-space-16);
}

.hm-section-header--center {
    text-align: center;
}

.hm-section-header__title {
    font-size: var(--hm-size-4xl);
    font-weight: var(--hm-weight-light);
    letter-spacing: var(--hm-tracking-tight);
    color: var(--hm-abyss);
    line-height: var(--hm-leading-snug);
}

.hm-section-header__title--light {
    color: var(--hm-white);
}

/* ─── 4. Grid ────────────────────────────────────────────── */
.hm-grid {
    display: grid;
    gap: var(--hm-space-6);
}

.hm-grid--2 {
    grid-template-columns: repeat(2, 1fr);
}

.hm-grid--3 {
    grid-template-columns: repeat(3, 1fr);
}

.hm-grid--5 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--hm-space-4);
}

/* Gap più ampio per i mercati */
.hm-grid--market {
    gap: var(--hm-space-4);
}

/* ─── 5. Split 50/50 (full-bleed) ───────────────────────── */
.hm-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 680px;
}

/* Media side: immagine object-fit */
.hm-split__media {
    position: relative;
    overflow: hidden;
}

.hm-split__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Content side: padding interno centrato */
.hm-split__content {
    display: flex;
    align-items: center;
    background-color: var(--hm-white);
    padding: var(--hm-space-20) var(--hm-space-16);
}

/* Info side: gradiente Dubai */
.hm-split__info {
    display: flex;
    align-items: center;
    background: var(--hm-gradient-dubai);
    padding: var(--hm-space-20) var(--hm-space-16);
}

/* Form side */
.hm-split__form {
    display: flex;
    align-items: flex-start;
    background-color: var(--hm-white);
    padding: var(--hm-space-20) var(--hm-space-16);
}

/* ─── 6. Steps layout ────────────────────────────────────── */
.hm-steps {
    display: flex;
    align-items: flex-start;
    position: relative;
    list-style: none;
    margin-top: var(--hm-space-12);
}

/* Linea connettrice gold */
.hm-steps::before {
    content: '';
    position: absolute;
    top: 31px; /* centro del cerchio 64px */
    left: 10%;
    right: 10%;
    height: 1px;
    background-color: var(--hm-gold);
    z-index: 0;
}

.hm-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-inline: var(--hm-space-4);
    position: relative;
    z-index: 1;
}

.hm-step__circle {
    width: 64px;
    height: 64px;
    border: 1.5px solid var(--hm-gold);
    background-color: var(--hm-white);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--hm-space-6);
    flex-shrink: 0;
}

.hm-step__num {
    font-family: var(--hm-font-heading);
    font-size: var(--hm-size-xs);
    font-weight: var(--hm-weight-semibold);
    letter-spacing: var(--hm-tracking-wider);
    color: var(--hm-gold);
}

.hm-step__body {
    max-width: 160px;
}

.hm-step__title {
    font-family: var(--hm-font-heading);
    font-size: var(--hm-size-md);
    font-weight: var(--hm-weight-semibold);
    color: var(--hm-abyss);
    margin-bottom: var(--hm-space-3);
    letter-spacing: var(--hm-tracking-normal);
}

.hm-step__text {
    font-size: var(--hm-size-sm);
    color: var(--hm-color-text-muted);
    line-height: var(--hm-leading-normal);
}