/* Editorial homepage styling for the live front-page.php template. */
.home-editorial { overflow: clip; color: var(--color-text); }
.home-container { width: min(1160px, calc(100% - 44px)); margin-inline: auto; }
.home-hero { position: relative; overflow: hidden; padding: clamp(3.5rem, 8vw, 6rem) 0 3.5rem; background: radial-gradient(ellipse at 80% 18%, rgba(245,224,154,.35), transparent 38%), linear-gradient(180deg,#FFFDF7 0%,#fdf6e3 100%); }
.home-hero::before { position:absolute; top:-210px; right:-115px; width:470px; height:470px; border:1px solid rgba(212,168,67,.18); border-radius:50%; content:""; pointer-events:none; }
.home-hero-grid { position:relative; display:grid; width:min(1160px,calc(100% - 44px)); grid-template-columns:minmax(0,1.15fr) minmax(290px,.85fr); align-items:center; gap:clamp(2rem,6vw,4rem); margin-inline:auto; }
.home-eyebrow,.home-section-label { margin:0; color:var(--color-gold-text); font-size:.66rem; font-weight:750; letter-spacing:.19em; line-height:1.5; text-transform:uppercase; }
.home-eyebrow { display:flex; align-items:center; gap:.65rem; }
.home-eyebrow span { color:var(--color-gold-text); font-size:1rem; }
.home-hero h1 { max-width:700px; margin:1.1rem 0 1.15rem; color:var(--color-text); font-family:Georgia,"Times New Roman",serif; font-size:clamp(2.8rem,6vw,4.55rem); font-weight:500; letter-spacing:-.045em; line-height:1.06; }
.home-hero-lead { max-width:590px; margin:0; color:var(--color-text-muted); font-size:clamp(1rem,1.6vw,1.12rem); line-height:1.8; }
.home-hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:1.3rem; margin-top:1.8rem; }
.home-button { display:inline-flex; min-height:3rem; align-items:center; justify-content:center; gap:.7rem; padding:.8rem 1.1rem; border:1px solid #006b3f; border-radius:.38rem; background:#006b3f; box-shadow:0 8px 18px rgba(0,107,63,.13); color:#fffdf7!important; font-size:.82rem; font-weight:750; text-decoration:none; transition:transform .18s ease,background .18s ease; }
.home-button:hover { transform:translateY(-2px); background:#004d2d; }
.home-button span,.home-text-link span { transition:transform .18s ease; }
.home-button:hover span,.home-text-link:hover span { transform:translateX(3px); }
.home-text-link { display:inline-flex; align-items:center; gap:.35rem; color:#006b3f; font-size:.82rem; font-weight:750; text-decoration:none; }
.home-text-link:hover { color:#004d2d; text-decoration:underline; text-underline-offset:.2em; }
.home-stat-row { display:flex; flex-wrap:wrap; gap:2rem; margin-top:2.6rem; padding-top:1.35rem; border-top:1px solid var(--color-border); }
.home-stat { display:grid; gap:.12rem; }
.home-stat strong { color:#006b3f; font-family:Georgia,"Times New Roman",serif; font-size:1.7rem; font-weight:500; line-height:1.1; }
.home-stat span { color:var(--color-text-muted); font-size:.61rem; letter-spacing:.1em; text-transform:uppercase; }
.home-hero-card { position:relative; display:grid; min-height:370px; place-items:center; isolation:isolate; }
.home-mihrab { position:relative; display:grid; width:min(330px,86%); aspect-ratio:.83; place-items:center; border:1px solid #c9a24d; border-radius:50% 50% 10px 10px / 44% 44% 10px 10px; background:linear-gradient(180deg,var(--nur-radiant-light),#fffdf5 55%,var(--qadri-emerald-pale)); box-shadow:inset 0 0 0 8px rgba(255,255,255,.55),0 28px 60px rgba(73,98,72,.1); }
.home-mihrab::before { position:absolute; inset:18px; border:1px solid rgba(201,162,77,.55); border-radius:inherit; content:""; }
.home-mihrab::after { position:absolute; top:12%; color:#bc9135; content:"✦"; font-size:1rem; }
.home-mihrab-inner { position:relative; z-index:1; display:grid; justify-items:center; gap:.5rem; text-align:center; }
.home-light-mark { color:#006b3f; font-family:Georgia,"Times New Roman",serif; font-size:3rem; line-height:1; }
.home-light-caption { color:#8d784b; font-size:.61rem; letter-spacing:.14em; text-transform:uppercase; }
.home-card-kicker { margin:1.3rem 0 .3rem; color:var(--color-gold-text); font-size:.62rem; font-weight:750; letter-spacing:.16em; text-transform:uppercase; }
.home-card-quote { margin:0; color:var(--color-text-muted); font-family:Georgia,"Times New Roman",serif; font-size:1.2rem; font-style:italic; text-align:center; }
.home-card-caption { max-width:260px; margin:.4rem 0 0; color:var(--color-text-muted); font-size:.76rem; text-align:center; }
.home-scroll-cue { display:flex; width:max-content; align-items:center; gap:.55rem; margin:1.8rem auto 0; color:var(--color-text-subtle); font-size:.64rem; font-weight:700; letter-spacing:.12em; text-decoration:none; text-transform:uppercase; }
.home-scroll-cue span { color:var(--color-gold-text); font-size:1rem; }
.home-intro { padding-block:4.2rem; }
.home-intro-grid { display:grid; grid-template-columns:.8fr 1.2fr; align-items:start; gap:clamp(1.5rem,5vw,3.5rem); margin-top:.65rem; }
.home-intro-grid h2 { max-width:470px; margin:0; color:var(--color-text); font-family:Georgia,"Times New Roman",serif; font-size:clamp(1.8rem,3.6vw,2.45rem); font-weight:500; letter-spacing:-.025em; line-height:1.2; }
.home-intro-grid p { max-width:680px; margin:.25rem 0 0; color:var(--color-text-muted); font-size:.94rem; line-height:1.85; }
.home-explore { padding:4.35rem 0 4.8rem; border-block:1px solid var(--color-border); background:var(--color-background-soft); }
.home-section-heading { display:flex; align-items:end; justify-content:space-between; gap:1.5rem; margin-bottom:1.8rem; }
.home-section-heading h2 { max-width:660px; margin:.45rem 0 0; color:var(--color-text); font-family:Georgia,"Times New Roman",serif; font-size:clamp(1.8rem,3.6vw,2.4rem); font-weight:500; letter-spacing:-.03em; line-height:1.16; }
.home-section-heading > p { max-width:430px; margin:0; color:var(--color-text-muted); font-size:.8rem; line-height:1.7; }
.home-destination-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.home-destination-card { position:relative; display:flex; min-height:205px; flex-direction:column; padding:1.35rem; border:1px solid var(--color-border); border-radius:.55rem; background:#FFFDF7; box-shadow:0 6px 22px rgba(25,60,41,.035); color:inherit; text-decoration:none; transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease; }
.home-destination-card:hover,.home-destination-card:focus-visible { transform:translateY(-3px); border-color:rgba(0,107,63,.3); box-shadow:0 18px 42px rgba(25,60,41,.09); }
.home-destination-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.15rem; }
.home-destination-number { color:#c2a15b; font-family:Georgia,"Times New Roman",serif; font-size:1.2rem; }
.home-destination-icon { display:grid; width:2.15rem; height:2.15rem; place-items:center; border-radius:50%; background:var(--qadri-emerald-pale); color:#006b3f; font-size:1rem; }
.home-destination-eyebrow { color:#9a7628; font-size:.57rem; font-weight:750; letter-spacing:.14em; text-transform:uppercase; }
.home-destination-title { margin:.35rem 0 .4rem; color:var(--color-text); font-family:Georgia,"Times New Roman",serif; font-size:1.35rem; line-height:1.25; }
.home-destination-description { max-width:34ch; padding-right:1.2rem; color:var(--color-text-muted); font-size:.73rem; line-height:1.65; }
.home-destination-arrow { position:absolute; right:1.2rem; bottom:1rem; color:#c09a49; font-size:1rem; }
.home-reflections { padding-block:4.5rem; }
.home-article-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.1rem; }
.home-article-card { overflow:hidden; border:1px solid var(--color-border); border-radius:.5rem; background:#FFFDF7; transition:transform .2s ease,box-shadow .2s ease; }
.home-article-card:hover { transform:translateY(-3px); box-shadow:0 15px 35px rgba(25,60,41,.09); }
.home-article-link { display:flex; height:100%; flex-direction:column; color:inherit; text-decoration:none; }
.home-article-image { display:grid; aspect-ratio:1.9; overflow:hidden; place-items:center; background:linear-gradient(135deg,var(--qadri-emerald-pale),var(--nur-radiant-light) 65%,#d6e2d5); color:#8c763f; font-family:Georgia,"Times New Roman",serif; font-size:2rem; }
.home-article-image img { width:100%; height:100%; object-fit:cover; }
.home-article-copy { display:flex; flex:1; flex-direction:column; align-items:flex-start; padding:1.1rem; }
.home-article-meta { display:flex; width:100%; justify-content:space-between; gap:.5rem; margin:0 0 .55rem; color:var(--color-gold-text); font-size:.58rem; letter-spacing:.06em; text-transform:uppercase; }
.home-article-copy h3 { margin:0 0 .45rem; color:var(--color-text); font-family:Georgia,"Times New Roman",serif; font-size:1.2rem; font-weight:500; line-height:1.3; }
.home-article-copy > p:not(.home-article-meta) { margin:0 0 1rem; color:var(--color-text-muted); font-size:.74rem; line-height:1.7; }
.home-article-more { margin-top:auto; color:#006b3f; font-size:.7rem; font-weight:750; }
.home-articles-empty { padding:1.5rem; border:1px dashed var(--color-border); border-radius:.5rem; color:var(--color-text-muted); }
.home-tools { padding:3.5rem 0; background:var(--qadri-emerald-pale); }
.home-tools-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.home-tool-intro { grid-column:1/-1; max-width:660px; }
.home-tool-intro h2 { margin:.45rem 0; color:var(--color-text); font-family:Georgia,"Times New Roman",serif; font-size:clamp(1.8rem,3.4vw,2.35rem); font-weight:500; }
.home-tool-intro > p:last-child { color:var(--color-text-muted); font-size:.82rem; }
.home-tool-card { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:.65rem 1rem; padding:1.4rem; border:1px solid var(--qadri-emerald-pale); border-radius:.5rem; background:#FFFDF7; }
.home-tool-icon { grid-row:span 2; display:grid; width:2.6rem; height:2.6rem; place-items:center; border-radius:50%; background:var(--qadri-emerald-pale); color:#006b3f; font-size:1.2rem; }
.home-tool-card h3 { margin:0 0 .25rem; color:var(--color-text); font-family:Georgia,"Times New Roman",serif; font-size:1.2rem; font-weight:500; }
.home-tool-card p { margin:0; color:var(--color-text-muted); font-size:.7rem; line-height:1.6; }
.home-tool-button,.home-tool-reset { display:inline-flex; min-height:2.5rem; align-items:center; justify-content:center; gap:.45rem; padding:.55rem .85rem; border:1px solid #006b3f; border-radius:.32rem; background:#006b3f; color:#fffdf7; font:700 .72rem var(--sans); cursor:pointer; }
.home-tool-reset { border-color:var(--color-border); background:transparent; color:var(--color-text-muted); }
.home-audio-card .home-tool-button { justify-self:start; }
.home-volume-label { grid-column:1; color:var(--color-text-muted); font-size:.68rem; }
.home-volume { width:100%; accent-color:#006b3f; }
.home-audio-status { grid-column:1/-1; min-height:1em; }
.home-tasbih-card { grid-template-columns:auto 1fr auto; }
.home-tasbih-card .home-tool-icon { grid-row:1/3; }
.tasbih-counter { display:grid; justify-items:end; color:var(--color-text-muted); font-size:.62rem; }
.tasbih-counter span:first-child { color:#006b3f; font-family:Georgia,"Times New Roman",serif; font-size:1.65rem; }
.tasbih-actions { display:flex; gap:.5rem; }
.home-closing { padding:3.2rem 0; background:#07563a; color:#fff9e9; }
.home-closing-inner { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }
.home-closing .home-section-label { color:#f5e09a; }
.home-closing h2 { margin:.35rem 0; color:#fff9e9; font-family:Georgia,"Times New Roman",serif; font-size:clamp(1.65rem,3.4vw,2rem); font-weight:500; }
.home-closing p:not(.home-section-label) { margin:0; color:var(--qadri-emerald-pale); font-size:.8rem; }
.home-button-light { border-color:#f5e09a; background:#f5e09a; box-shadow:none; color:var(--color-text)!important; white-space:nowrap; }
.home-button-light:hover { background:#e8d07a; }
@media(max-width:850px) { .home-hero-grid { grid-template-columns:1fr; gap:1rem; } .home-hero-card { min-height:315px; } .home-mihrab { width:260px; } .home-intro-grid { grid-template-columns:1fr; gap:.6rem; } .home-destination-grid,.home-article-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .home-section-heading { align-items:flex-start; flex-direction:column; } }
@media(max-width:560px) { .home-container,.home-hero-grid { width:calc(100% - 32px); } .home-hero { padding-top:3rem; } .home-hero h1 { font-size:2.7rem; } .home-stat-row { gap:1.2rem; } .home-stat strong { font-size:1.4rem; } .home-hero-card { min-height:290px; } .home-mihrab { width:235px; } .home-intro,.home-reflections { padding-block:3rem; } .home-explore { padding-block:3.2rem; } .home-destination-grid,.home-article-grid,.home-tools-grid { grid-template-columns:1fr; } .home-tool-intro { grid-column:auto; } .home-tool-card,.home-tasbih-card { grid-template-columns:auto 1fr; } .home-closing-inner { align-items:flex-start; flex-direction:column; } }
@media(prefers-reduced-motion:reduce) { .home-button,.home-text-link span,.home-destination-card,.home-article-card { transition:none; } .home-button:hover,.home-destination-card:hover,.home-article-card:hover { transform:none; } }