/* Home page sections: «نگارخانه» mosaic (materials/home_gallery) and statistics + picture
   (materials/home_stats). Colours follow site-chrome.css (--sc-*), repeated here as fallbacks. */
.hsec {
    --hs-green: var(--sc-green, #119c4d);
    --hs-green-ink: var(--sc-green-ink, #0f7a3e);
    --hs-green-soft: var(--sc-green-soft, #e8f5ee);
    --hs-ink: var(--sc-ink, #1d2b23);
    --hs-muted: var(--sc-muted, #5f6f66);
    --hs-line: var(--sc-line, #e3ebe6);
    --hs-ease: cubic-bezier(.2, .7, .2, 1);
    padding: 48px 0 8px;
}
.hsec .container:before, .hsec .container:after { display: none; }
/* the theme pads every section > .container by 70px; the sections space themselves */
section.hsec > .container { padding-top: 0; padding-bottom: 0; }

/* ---------- section heading ---------- */
.hsec-head {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
    margin-bottom: 20px;
}
.hsec-kicker {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--hs-green-ink);
    font-size: 13px; font-weight: 700;
}
.hsec-kicker:before { content: ""; width: 22px; height: 3px; border-radius: 2px; background: var(--hs-green); }
.hsec-title {
    margin: 6px 0 0;
    color: var(--hs-ink);
    font-size: 22px; font-weight: 800; line-height: 1.5;
}
.hsec-more {
    display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
    height: 38px; padding: 0 14px 0 10px;
    border: 1px solid var(--hs-line); border-radius: 999px;
    background: #fff;
    color: var(--hs-green-ink) !important;
    font-size: 13px; font-weight: 700;
    text-decoration: none !important;
    transition: background-color .2s, border-color .2s, color .2s;
}
.hsec-more:hover { border-color: var(--hs-green); background: var(--hs-green); color: #fff !important; }
.hsec-more svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
body.ltr .hsec-more svg { transform: scaleX(-1); }

/* ---------- gallery mosaic: the newest album large, four around it ---------- */
.hgal-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 210px;
    gap: 14px;
}
.hgal-item {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 18px;
    background: #dfe8e2;
    box-shadow: 0 8px 22px rgba(16, 40, 26, .08);
    color: #fff !important;
    text-decoration: none !important;
}
.hgal-item.is-big { grid-column: span 2; grid-row: span 2; }
.hgal-item img {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .6s var(--hs-ease);
}
.hgal-item:after {
    content: "";
    position: absolute; right: 0; bottom: 0; left: 0;
    height: 70%;
    background: linear-gradient(to top, rgba(6, 33, 19, .86), rgba(6, 33, 19, .35) 55%, rgba(6, 33, 19, 0));
    transition: height .4s var(--hs-ease);
}
.hgal-item:hover img { transform: scale(1.06); }
.hgal-item:hover:after { height: 85%; }
.hgal-info {
    position: absolute; right: 0; bottom: 0; left: 0; z-index: 1;
    display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
    padding: 14px 16px;
}
.hgal-count {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .2);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    font-size: 11.5px; font-weight: 600;
}
.hgal-count svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hgal-title {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: 14px; font-weight: 700; line-height: 1.7;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .35);
}
.hgal-item.is-big .hgal-info { padding: 22px 24px; }
.hgal-item.is-big .hgal-title { font-size: 19px; }
.hgal-date { font-size: 12px; opacity: .85; }

/* ---------- statistics + picture ---------- */
.hstat { padding-top: 40px; padding-bottom: 24px; }
.hstat-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 40px;
}
.hstat-body .mrn-mid-col { display: block; }
.hstat .samar { max-width: none; margin: 0; }
.hstat-figure img { display: block; width: 100%; max-width: 560px; height: auto; margin: 0 auto; }

/* ---------- phones / tablets ---------- */
@media (max-width: 991px) {
    .hgal-grid { grid-auto-rows: 170px; }
    .hstat-inner { grid-template-columns: 1fr; gap: 24px; }
    .hstat .samar { margin-top: 0; }
    .hstat-figure img { max-width: 440px; }
}
@media (max-width: 767px) {
    .hsec { padding-top: 32px; }
    .hsec .container { padding-right: 16px; padding-left: 16px; }
    .hsec-title { font-size: 17px; }
    .hsec-more { height: 34px; padding: 0 12px 0 8px; font-size: 12px; }
    .hgal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; gap: 10px; }
    .hgal-item { height: 150px; border-radius: 14px; }
    .hgal-item.is-big { grid-column: span 2; grid-row: auto; height: 210px; }
    .hgal-info { padding: 10px 12px; gap: 4px; }
    .hgal-item.is-big .hgal-info { padding: 14px 16px; }
    .hgal-item.is-big .hgal-title { font-size: 16px; }
    .hgal-title { font-size: 12.5px; line-height: 1.6; }
    .hgal-count { font-size: 10.5px; padding: 2px 8px; }
    .hstat { padding-top: 28px; }
}
@media (prefers-reduced-motion: reduce) {
    .hgal-item img, .hgal-item:after { transition: none; }
}