/* Bank Alkair — home page: block wrappers, the five separator styles, intro message and page cards
 * (p02 part 13). Values from tokens.css only. */

.home-block { position: relative; padding-block: var(--s-space-9); }
.home-block.is-bleed { padding-block: 0; }
.home-block.is-bleed .home-head { padding-top: var(--s-space-7); }
@media (max-width: 760px) { .home-block { padding-block: var(--s-space-7); } }

/* Heading rendered by the home builder */
.home-head { margin-bottom: var(--s-space-7); }
.home-title { position: relative; margin: 0; font-size: var(--s-text-section); font-weight: var(--s-weight-strong); line-height: var(--s-line-heading); }
.home-desc { margin: var(--s-space-3) 0 0; max-width: var(--s-container-narrow); color: var(--s-muted); font-size: var(--s-text-md); }
.sep-1 .home-title, .sep-2 .home-title, .sep-3 .home-title { padding-bottom: var(--s-space-3); }
.sep-1 .home-title::after, .sep-2 .home-title::after, .sep-3 .home-title::after { content: ""; position: absolute; inset-inline-start: 0; bottom: 0; width: var(--s-space-9); height: var(--s-space-1); border-radius: var(--s-radius-pill); background: linear-gradient(90deg, var(--s-primary), var(--s-accent)); }

/* 2 — thin line between blocks */
.home-block.sep-2 + .home-block.sep-2::before { content: ""; position: absolute; top: 0; inset-inline: max(var(--s-space-6), calc((100% - var(--s-container)) / 2 + var(--s-space-6))); height: var(--s-hairline); background: linear-gradient(90deg, transparent, var(--s-border) 15%, var(--s-border) 85%, transparent); }

/* 3 — alternating background */
.home-block.is-alt { background: var(--s-card-bg); border-block: var(--s-hairline) solid var(--s-border); }

/* 4 — title with a side line */
.sep-4 .home-title { display: flex; align-items: center; gap: var(--s-space-4); }
.sep-4 .home-title::before { content: ""; flex: none; width: var(--s-space-3); height: var(--s-space-3); border-radius: var(--s-radius-sm); background: var(--s-accent); transform: rotate(45deg); }
.sep-4 .home-title::after { content: ""; flex: 1; height: var(--s-border-w); border-radius: var(--s-radius-pill); background: linear-gradient(to left, color-mix(in srgb, var(--s-primary) var(--s-tint-mid), transparent), transparent); }

/* 5 — centred title */
.sep-5 .home-head { text-align: center; }
.sep-5 .home-title { display: flex; align-items: center; justify-content: center; gap: var(--s-space-4); }
.sep-5 .home-title::before, .sep-5 .home-title::after { content: ""; flex: 0 1 var(--s-space-10); height: var(--s-border-w); border-radius: var(--s-radius-pill); }
.sep-5 .home-title::before { background: linear-gradient(to left, var(--s-accent), transparent); }
.sep-5 .home-title::after { background: linear-gradient(to right, var(--s-accent), transparent); }
.sep-5 .home-desc { margin-inline: auto; }

/* Intro message */
.intro-card { position: relative; overflow: hidden; max-width: var(--s-intro-max); margin-inline: auto; padding: var(--s-space-8) var(--s-space-8) var(--s-space-7); border-radius: var(--s-radius-xl); background: var(--s-card-bg); border: var(--s-hairline) solid var(--s-border); box-shadow: var(--s-shadow); text-align: center; }
.intro-card::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: var(--s-space-1); background: linear-gradient(90deg, var(--s-accent), var(--s-primary), var(--s-accent)); }
.intro-mark { display: inline-grid; place-items: center; width: var(--s-quote-mark); height: var(--s-quote-mark); margin-bottom: var(--s-space-4); border-radius: 50%; background: var(--s-primary-light); color: var(--s-link); }
.intro-mark .icon { width: var(--s-icon-lg); height: var(--s-icon-lg); }
.intro-text { margin: 0; font-size: var(--s-text-md); line-height: var(--s-line); color: var(--s-text); }
@media (max-width: 760px) { .intro-card { padding: var(--s-space-7) var(--s-space-5) var(--s-space-6); } }

/* Page cards */
.page-cards { display: grid; gap: var(--s-space-6); grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--s-card-min)), 1fr)); }
.page-card { position: relative; }
.page-card .card-body { gap: var(--s-space-3); }
.page-card-link { color: var(--s-text); }
.page-card-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.page-card:hover .page-card-link { color: var(--s-link); }
.page-card:focus-within { box-shadow: var(--s-shadow-lg); }
.page-card-icon { display: grid; place-items: center; width: var(--s-page-card-icon); height: var(--s-page-card-icon); border-radius: var(--s-radius-lg); background: linear-gradient(135deg, var(--s-primary-light), var(--s-card-bg)); color: var(--s-link); }
.page-card-icon .icon { width: var(--s-icon-lg); height: var(--s-icon-lg); }
.page-card-more { margin-top: auto; padding-top: var(--s-space-2); display: inline-flex; align-items: center; gap: var(--s-space-2); color: var(--s-link); font-size: var(--s-text-sm); font-weight: var(--s-weight-title); }
.page-card-more .icon { transition: transform var(--s-fast) var(--s-ease); }
.page-card:hover .page-card-more .icon { transform: translateX(var(--s-lift)); }

/* Nothing published yet: identity only */
.home-welcome { min-height: var(--s-welcome-min-h); display: grid; place-items: center; text-align: center; padding-block: var(--s-space-10); background: radial-gradient(circle at top, color-mix(in srgb, var(--s-primary) var(--s-tint-soft), transparent), transparent 65%); }
.home-welcome-mark { display: inline-grid; place-items: center; width: var(--s-quote-mark); height: var(--s-quote-mark); margin-bottom: var(--s-space-5); border-radius: var(--s-radius-xl); background: linear-gradient(135deg, var(--s-primary), var(--s-primary-dark)); color: var(--s-on-primary); box-shadow: var(--s-shadow-lg); }
.home-welcome-mark .icon { width: var(--s-icon-xl); height: var(--s-icon-xl); }
.home-welcome h1 { font-size: var(--s-text-hero); font-weight: var(--s-weight-strong); }
.home-welcome p { max-width: var(--s-container-narrow); margin: var(--s-space-3) auto 0; color: var(--s-muted); font-size: var(--s-text-md); }