/* =========================================================
   PakSindh v5.3 - redesigned homepage sections
   Discover Sindh · Learn & Play · Sindh Insights ·
   Explore Sindh by Region · The Seven Heroines of Shah Jo Risalo
   + Ajrak diamond heading badges (the logo motif).
   Loaded after style.css, home.css and discover.css.
   ========================================================= */
:root {
    --aj-red: #c4161c;
    --aj-deep: #8f1015;
    --aj-indigo: #0f1f4b;
    --aj-night: #0b1a3a;
    --aj-gold: #e9b949;
    --aj-gold-ink: #a8730f;   /* gold that stays readable on white */
    --ps-surface: var(--card, #fff);
    --ps-surface-line: var(--line, #e6dfd3);
    --ps-surface-shadow: 0 12px 30px rgba(11, 26, 58, .07);
    /* repeating Ajrak border: indigo ground, madder-red diamonds, white dots, gold rules */
    --ajrak-border: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14' viewBox='0 0 28 14'%3E%3Crect width='28' height='14' fill='%230f1f4b'/%3E%3Cpath d='M14 1.5l5.5 5.5-5.5 5.5L8.5 7z' fill='%23c4161c'/%3E%3Cpath d='M14 4.6l2.4 2.4-2.4 2.4-2.4-2.4z' fill='%23fff'/%3E%3Ccircle cx='1.5' cy='7' r='1.3' fill='%23fff'/%3E%3Ccircle cx='26.5' cy='7' r='1.3' fill='%23fff'/%3E%3Cpath d='M0 .6h28M0 13.4h28' stroke='%23e9b949' stroke-width='1.2'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------
   0. AJRAK DIAMOND BADGE (heading icons)
   --------------------------------------------------------- */
.aj-badge { position: relative; display: inline-block; flex: 0 0 auto; width: 52px; height: 52px; filter: drop-shadow(0 6px 10px rgba(143, 16, 21, .28)); }
.aj-badge .aj-svg { display: block; width: 100%; height: 100%; transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.aj-badge .aj-o { fill: var(--aj-a, var(--aj-red)); }
.aj-badge .aj-i { fill: var(--aj-b, var(--aj-deep)); }
.aj-glyph {
    position: absolute; right: -5px; bottom: -3px;
    width: 23px; height: 23px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: #fff; color: var(--rb, var(--aj-deep));
    box-shadow: 0 0 0 2px var(--rb, var(--aj-red)), 0 3px 8px rgba(11, 26, 58, .25);
}
.aj-glyph .icon, body[class*="ps-home-"] .hh-ajrak .aj-glyph .icon { width: 12px; height: 12px; stroke-width: 2.4; }
*:hover > .aj-badge .aj-svg, .home-head:hover .aj-badge .aj-svg { transform: rotate(90deg); }

/* homepage section headings use the badge instead of the old square tile */
body[class*="ps-home-"] .home-head .hh-ajrak { width: 54px; height: 54px; margin-right: 2px; }
body[class*="ps-home-"] .home-head { gap: 16px; }

/* small Ajrak rule: diamond - line - diamond */
.aj-rule { display: inline-flex; align-items: center; gap: 6px; }
.aj-rule i { width: 7px; height: 7px; background: var(--aj-red); transform: rotate(45deg); }
.aj-rule b { width: 46px; height: 2px; background: linear-gradient(90deg, var(--aj-red), var(--aj-gold)); }

/* shared line-art */
.ps-art { display: block; width: 100%; height: 100%; }

/* ---------------------------------------------------------
   1. DISCOVER SINDH - illustrated topic cards on an Ajrak band
   --------------------------------------------------------- */
.topic-strip.discover-band {
    display: block;
    position: relative;
    isolation: isolate;
    margin-top: 28px;
    padding: 34px 28px 28px;
    border: 1px solid var(--ps-surface-line);
    border-radius: 24px;
    color: var(--text, #1f2937);
    background: var(--ps-surface);
    box-shadow: var(--ps-surface-shadow);
    overflow: hidden;
}
.topic-strip.discover-band::before {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 0; bottom: auto;
    width: auto; height: 14px;
    background: var(--ajrak-border) center / 28px 14px repeat-x;
    z-index: 1;
}
.topic-strip.discover-band::after {
    content: '';
    position: absolute;
    right: -90px; top: -90px;
    width: 340px; height: 340px;
    background: url('assets/ajrak-pattern.svg') center / 48px repeat;
    opacity: .045;
    transform: rotate(45deg);
    border-radius: 48px;
    z-index: -1;
    pointer-events: none;
}
.db-head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.db-badge { width: 60px; height: 60px; }
.db-titles { flex: 1 1 320px; min-width: 0; }
.db-eyebrow { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--aj-red); }
.discover-band .ts-title { margin: 4px 0 2px; font-size: 30px; line-height: 1.15; color: var(--ink, #0f1f4b); display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.db-sd { font-family: var(--font-arabic), serif; font-size: 26px; font-weight: 700; color: var(--aj-gold-ink); }
.discover-band .ts-sub { margin: 0; font-size: 14px; color: var(--text-soft, #5b6472); }
.db-more {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 18px; border-radius: 999px;
    border: 1px solid var(--ps-surface-line); color: var(--ink, #0f1f4b);
    font-size: 13.5px; font-weight: 600;
    transition: background .2s ease, color .2s ease, gap .2s ease;
}
.db-more .icon { width: 15px; height: 15px; }
.db-more:hover, .db-more:focus-visible { background: var(--aj-red); border-color: var(--aj-red); color: #fff; gap: 11px; }

/* v5.4 cards: colour illustration (or article photo) + line-art medallion + Sindhi name */
.discover-band .db-grid {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin: 26px 0 0;
    padding: 0;
}
.discover-band .db-grid li { margin: 0; min-width: 0; display: flex; }
.discover-band .db-card {
    --tc: #c4161c;
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    border-radius: 18px;
    border: 1px solid var(--ps-surface-line);
    background: var(--ps-surface);
    color: var(--ink, #0f1f4b);
    text-decoration: none;
    overflow: hidden;
    isolation: isolate;
    box-shadow: 0 2px 6px rgba(11, 26, 58, .05);
    transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease, border-color .3s ease;
}
/* own colour per topic (also used by the medallion, tag, Explore link and hover bar) */
.discover-band .db-card.ts-indus    { --tc: #0f7f8a; }
.discover-band .db-card.ts-mohenjo  { --tc: #b0532a; }
.discover-band .db-card.ts-makli    { --tc: #b07a12; }
.discover-band .db-card.ts-ranikot  { --tc: #6d4c8f; }
.discover-band .db-card.ts-shrine   { --tc: #0e8a5a; }
.discover-band .db-card.ts-ajrak    { --tc: #c4161c; }
.discover-band .db-card.ts-topi     { --tc: #b0246e; }
.discover-band .db-card.ts-festival { --tc: #2f5fc0; }
/* tones used by older filter entries */
.discover-band .db-card.ts-history  { --tc: #c8702a; }
.discover-band .db-card.ts-heritage { --tc: #b8921a; }
.discover-band .db-card.ts-culture  { --tc: #c4161c; }
.discover-band .db-card.ts-tourism  { --tc: #2f7fc8; }

.discover-band .db-card::after {           /* colour bar that grows on hover */
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 4px;
    background: var(--tc);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s ease;
}
.db-media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: color-mix(in srgb, var(--tc) 18%, var(--ps-surface));
}
.db-media .db-scene, .db-media .db-photo {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s cubic-bezier(.2, .8, .2, 1);
}
.db-media.is-photo::before {               /* keeps photos in the card colour family */
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(11, 26, 58, .26) 0%, rgba(11, 26, 58, 0) 34%, rgba(11, 26, 58, 0) 62%, color-mix(in srgb, var(--tc) 22%, rgba(11, 26, 58, .22)) 100%);
    pointer-events: none;
}
.db-media::after {                          /* Ajrak border under every picture */
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 9px;
    z-index: 2;
    background: var(--ajrak-border) center / 18px 9px repeat-x;
}
.db-media.is-empty { display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--tc) 45%, #fff), var(--tc)); color: #fff; }
.db-media-icon { width: 64px; height: 64px; opacity: .9; }
.db-media-icon svg { width: 100%; height: 100%; }
.db-tag {
    position: absolute;
    top: 10px; left: 10px;
    z-index: 3;
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .93);
    color: color-mix(in srgb, var(--tc) 82%, #000);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    line-height: 1.2;
    box-shadow: 0 2px 8px rgba(11, 26, 58, .18);
}
.db-tag .icon { width: 11px; height: 11px; stroke-width: 2.6; }
.db-num {
    position: absolute;
    top: 10px; right: 10px;
    z-index: 3;
    min-width: 30px;
    padding: 3px 7px;
    border-radius: 999px;
    background: rgba(11, 26, 58, .55);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    font-family: var(--font-serif);
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    color: #fff;
}
.db-body {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 34px 16px 16px;
    text-align: left;
}
.db-icon {
    position: absolute;
    top: -28px; left: 14px;
    z-index: 4;
    width: 54px; height: 54px;
    padding: 9px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff;
    background: radial-gradient(circle at 32% 28%, color-mix(in srgb, var(--tc) 55%, #fff) 0%, var(--tc) 60%, color-mix(in srgb, var(--tc) 70%, #000) 100%);
    box-shadow: 0 0 0 4px var(--ps-surface), 0 8px 18px color-mix(in srgb, var(--tc) 45%, transparent);
    transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}
.db-icon .db-icon-svg, .db-icon .icon { width: 100%; height: 100%; }
.db-title-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.db-label { font-family: var(--font-serif); font-size: 18px; font-weight: 700; line-height: 1.2; color: var(--ink, #0f1f4b); }
.db-card-sd { font-family: var(--font-arabic), serif; font-size: 16px; font-weight: 700; line-height: 1.5; color: var(--aj-gold-ink); white-space: nowrap; }
.db-note { font-size: 13px; line-height: 1.45; color: var(--muted, #6b7280); }
.db-cta {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: auto;
    padding-top: 12px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--tc) 85%, #000);
    transition: gap .25s ease;
}
.db-cta .icon { width: 14px; height: 14px; }
.discover-band .db-card:hover,
.discover-band .db-card:focus-visible {
    transform: translateY(-6px);
    border-color: color-mix(in srgb, var(--tc) 55%, var(--ps-surface-line));
    box-shadow: 0 18px 36px color-mix(in srgb, var(--tc) 22%, transparent);
    color: var(--ink, #0f1f4b);
}
.discover-band .db-card:focus-visible { outline: 3px solid var(--tc); outline-offset: 3px; }
.db-card:hover::after, .db-card:focus-visible::after { transform: scaleX(1); }
.db-card:hover .db-scene, .db-card:hover .db-photo,
.db-card:focus-visible .db-scene, .db-card:focus-visible .db-photo { transform: scale(1.06); }
.db-card:hover .db-icon, .db-card:focus-visible .db-icon { transform: rotate(-8deg) scale(1.06); }
.db-card:hover .db-cta, .db-card:focus-visible .db-cta { gap: 10px; }

html[data-theme="dark"] .topic-strip.discover-band { box-shadow: none; }
html[data-theme="dark"] .discover-band .db-card { background: var(--ps-surface); box-shadow: none; }
html[data-theme="dark"] .db-tag { background: rgba(15, 23, 42, .86); color: color-mix(in srgb, var(--tc) 45%, #fff); }
html[data-theme="dark"] .db-cta { color: color-mix(in srgb, var(--tc) 50%, #fff); }
html[data-theme="dark"] .db-card-sd, html[data-theme="dark"] .db-sd { color: var(--aj-gold); }
html[data-theme="dark"] .db-eyebrow { color: #ff7f86; }

/* ---------------------------------------------------------
   2. LEARN & PLAY
   --------------------------------------------------------- */
.lp-grid { gap: 22px; align-items: stretch; }
.lp-grid > .widget { height: 100%; }
.ps-learn, .ps-quiz { border-radius: 20px; }
.ps-learn { padding: 30px 24px 22px; border: 1px solid #ecd9b8; background: linear-gradient(160deg, #fffaf2 0%, #f6ead6 100%); }
.ps-learn::before, .ps-quiz::after {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 12px;
    background: var(--ajrak-border) center / 24px 12px repeat-x;
    z-index: 1;
}
.ps-learn::after { right: auto; left: -60px; top: auto; bottom: -60px; width: 200px; height: 200px; background: url('assets/ajrak-pattern.svg') center / 40px repeat; border-radius: 40px; transform: rotate(45deg); opacity: .05; }
.lp-top { position: relative; z-index: 1; display: flex; align-items: center; gap: 16px; }
.lp-art {
    position: relative;
    flex: 0 0 60px; width: 60px; height: 60px;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff;
}
.lp-art::before {
    content: '';
    position: absolute;
    inset: 8px;
    border-radius: 9px;
    transform: rotate(45deg);
    background: linear-gradient(135deg, var(--aj-red), var(--aj-deep));
    box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--aj-red), 0 10px 20px rgba(143, 16, 21, .3);
}
.lp-art .ps-art { position: relative; width: 30px; height: 30px; }
.lp-top-text { display: flex; flex-direction: column; min-width: 0; }
.lp-top .ps-kicker { margin: 0; }
.lp-sub { font-size: 13px; color: var(--text-soft); }
.ps-learn .ps-phrase {
    position: relative;
    z-index: 1;
    margin-top: 18px;
    padding: 22px 18px 18px;
    border-radius: 16px;
    background: #fff;
    border: 1px dashed #dcbf8e;
    text-align: center;
    box-shadow: 0 10px 24px rgba(120, 80, 20, .08);
}
.ps-learn .ps-phrase::before, .ps-learn .ps-phrase::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 12px; height: 12px;
    margin-top: -6px;
    background: var(--aj-red);
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px #dcbf8e;
    transform: rotate(45deg);
}
.ps-learn .ps-phrase::before { left: -7px; }
.ps-learn .ps-phrase::after { right: -7px; }
.ps-learn .ps-phrase .ps-sd { display: block; text-align: center; font-size: 38px; line-height: 1.5; }
.ps-learn .ps-learn-actions { position: relative; z-index: 1; justify-content: center; }
.ps-learn .ps-book { position: relative; z-index: 1; }
html[data-theme="dark"] .ps-learn { background: linear-gradient(160deg, #18213a 0%, #121a2e 100%); border-color: var(--line); }
html[data-theme="dark"] .ps-learn .ps-phrase { background: #0f1729; border-color: #3a4566; box-shadow: none; }
html[data-theme="dark"] .ps-learn .ps-phrase::before, html[data-theme="dark"] .ps-learn .ps-phrase::after { border-color: #0f1729; box-shadow: 0 0 0 1px #3a4566; }

.ps-quiz {
    padding: 30px 24px 24px;
    color: var(--text, #1f2937);
    background: var(--ps-surface);
    border: 1px solid var(--ps-surface-line);
    box-shadow: var(--ps-surface-shadow);
}
.ps-quiz::before { opacity: .06; }
.ps-quiz .ps-kicker { color: var(--aj-red); }
.ps-quiz h3, .ps-quiz .ps-quiz-result { color: var(--ink, #0f1f4b); }
.ps-quiz p { color: var(--text-soft, #5b6472); }
.ps-quiz-top { color: var(--muted, #6b7280); }
.ps-quiz-bar { background: #efe9df; }
.ps-quiz .ps-opt { border-color: var(--ps-surface-line); background: #fbf8f3; color: var(--ink, #0f1f4b); }
.ps-quiz .ps-opt:hover:not(:disabled), .ps-quiz .ps-opt:focus-visible { background: #fff; border-color: var(--aj-red); }
.ps-quiz .ps-opt.is-right { background: #0e7a4b; border-color: #0e7a4b; color: #fff; }
.ps-quiz .ps-opt.is-wrong { background: var(--aj-deep); border-color: var(--aj-deep); color: #fff; }
.ps-quiz .ps-quiz-exp.ok { color: #0e7a4b; }
.ps-quiz .ps-quiz-exp.no { color: var(--aj-deep); }
.lp-art-quiz {
    position: absolute;
    top: 26px; right: 20px;
    width: 76px; height: 76px;
    padding: 14px;
    border-radius: 50%;
    color: var(--aj-gold-ink);
    background: rgba(233, 185, 73, .14);
    box-shadow: inset 0 0 0 1.5px rgba(168, 115, 15, .3);
    z-index: 1;
}
.lp-art-quiz::before { content: none; }
.lp-art-quiz .ps-art { width: 100%; height: 100%; }
.ps-quiz .ps-kicker, .ps-quiz .ps-quiz-start, .ps-quiz .ps-quiz-play, .ps-quiz .ps-quiz-end { position: relative; z-index: 2; }
.ps-quiz .ps-quiz-start h3 { padding-right: 90px; font-size: 24px; }
.ps-quiz .ps-quiz-start > p:first-of-type { padding-right: 70px; }
.ps-quiz-play ~ .lp-art-quiz, .ps-quiz:has(.ps-quiz-start[hidden]) .lp-art-quiz { display: none; }
.lp-facts { list-style: none; display: flex; gap: 10px; margin: 16px 0 18px; padding: 0; flex-wrap: wrap; }
.lp-facts li {
    flex: 1 1 0; min-width: 84px; margin: 0;
    display: flex; flex-direction: column; align-items: flex-start;
    padding: 10px 12px;
    border-radius: 12px;
    background: linear-gradient(180deg, #fff8ee, var(--ps-surface));
    border: 1px solid var(--ps-surface-line);
}
.lp-facts b { font-family: var(--font-serif); font-size: 24px; line-height: 1; color: var(--aj-red); }
.lp-facts span { margin-top: 4px; font-size: 12px; color: var(--muted, #6b7280); }
.ps-quiz .ps-btn { background: var(--aj-red); color: #fff; }
.ps-quiz .ps-btn:hover, .ps-quiz .ps-btn:focus-visible { background: var(--aj-indigo); color: #fff; }
.ps-quiz .ps-btn-ghost { background: transparent; color: var(--ink, #0f1f4b); border: 1px solid var(--ps-surface-line); }
html[data-theme="dark"] .ps-quiz .ps-opt { background: rgba(255, 255, 255, .04); }
html[data-theme="dark"] .ps-quiz-bar { background: rgba(255, 255, 255, .1); }
html[data-theme="dark"] .lp-facts li { background: rgba(255, 255, 255, .04); }
html[data-theme="dark"] .lp-facts b { color: #ff7f86; }
html[data-theme="dark"] .ps-quiz .ps-kicker { color: #ff7f86; }
html[data-theme="dark"] .ps-quiz .ps-quiz-exp.ok { color: #6fe0a8; }
html[data-theme="dark"] .ps-quiz .ps-quiz-exp.no { color: #ffb3b7; }
.ps-quiz .ps-btn-wa { background: #1f9d55; }

/* ---------------------------------------------------------
   3. SINDH INSIGHTS
   --------------------------------------------------------- */
.section-insights .ins-grid { gap: 20px; }
.section-insights .ins-card {
    --ia: var(--aj-red);
    position: relative;
    isolation: isolate;
    padding: 34px 22px 22px;
    border-radius: 20px;
    border: 1px solid var(--line);
    overflow: hidden;
}
.section-insights .ins-card::before {
    content: '';
    display: block;
    position: absolute;
    left: 0; right: 0; top: 0; bottom: auto;
    width: auto; height: 12px;
    margin: 0;
    background: var(--ajrak-border) center / 24px 12px repeat-x;
    border: 0; border-radius: 0; opacity: 1; transform: none;
    z-index: 1;
}
.section-insights .ins-card::after { content: none; display: none; }
.section-insights .ins-card .fact-pattern { display: none; }
.ins-art {
    position: absolute;
    top: 26px; right: 18px;
    width: 58px; height: 58px;
    padding: 9px;
    border-radius: 16px;
    color: var(--ia);
    background: color-mix(in srgb, var(--ia) 10%, transparent);
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ia) 28%, transparent);
    z-index: 0;
    transition: transform .4s ease;
}
.ins-card:hover .ins-art { transform: rotate(-6deg) scale(1.06); }
.section-insights .ins-card .otd-kicker,
.section-insights .ins-card .quote-kicker,
.section-insights .ins-card .fact-kicker {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 5px 12px 5px 10px;
    border-radius: 999px;
    font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: #fff; background: var(--ia);
}
.section-insights .ins-card .otd-kicker::before,
.section-insights .ins-card .quote-kicker::before,
.section-insights .ins-card .fact-kicker::before { content: ''; width: 7px; height: 7px; background: currentColor; transform: rotate(45deg); }
/* On this day */
.ins-otd { background: linear-gradient(180deg, #fff 0%, #fdf4f3 100%); }
.ins-otd .otd-date { margin: 20px 0 8px; align-items: flex-end; gap: 10px; }
.section-insights .ins-otd .otd-day { font-size: 60px; line-height: .9; color: var(--aj-red); }
.ins-otd .otd-month { font-size: 20px; letter-spacing: .06em; }
.ins-otd .otd-year { padding: 3px 9px; border-radius: 999px; background: color-mix(in srgb, var(--aj-red) 10%, transparent); color: var(--aj-deep); font-family: var(--font-sans); font-size: 12.5px; font-weight: 700; }
.ins-otd .otd-when { display: inline-flex; align-self: flex-start; margin-top: 12px; padding: 4px 11px; border-radius: 999px; background: color-mix(in srgb, var(--green) 12%, transparent); color: var(--green); }
.ins-otd .otd-when:empty { display: none; }
/* Quote */
.section-insights .ins-quote { --ia: #b7791f; background: linear-gradient(150deg, #fffaf0 0%, #f6e7cc 100%); border-color: #ecd9b8; }
.section-insights .ins-quote .quote-text { margin: 24px 0 14px; font-size: 19.5px; line-height: 1.55; }
.ins-quote .quote-mark { top: auto; bottom: -46px; right: 10px; font-size: 150px; color: rgba(183, 121, 31, .16); }
.ins-quote .quote-author { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); }
.ins-quote .quote-author::before { content: ''; width: 22px; height: 2px; background: var(--ia); }
/* Did you know */
.section-insights .ins-fact { --ia: #0e7a4b; background: linear-gradient(180deg, var(--ps-surface) 0%, #f2faf6 100%); color: var(--text, #1f2937); border-color: var(--ps-surface-line); }
.section-insights .ins-fact .fact-body { padding: 0; }
.ins-fact .fact-slide h4 { margin-top: 22px; padding-right: 50px; font-size: 21px; color: var(--ink, #0f1f4b); }
.ins-fact .fact-slide p { color: var(--text-soft, #5b6472); }
.ins-fact .fact-next { border-color: var(--ps-surface-line); color: var(--ink, #0f1f4b); }
.ins-fact .fact-next:hover, .ins-fact .fact-next:focus-visible { background: #0e7a4b; border-color: #0e7a4b; color: #fff; }
.fact-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
.fact-foot .fact-next { margin-top: 0; }
.fact-count { font-size: 12.5px; color: var(--muted, #6b7280); letter-spacing: .04em; }
.fact-count b { color: #0e7a4b; font-size: 15px; }
html[data-theme="dark"] .section-insights .ins-fact { background: linear-gradient(180deg, #18213a 0%, #141c31 100%); }
html[data-theme="dark"] .fact-count b { color: #6fe0a8; }
html[data-theme="dark"] .ins-otd { background: linear-gradient(180deg, #18213a 0%, #141c31 100%); }
html[data-theme="dark"] .ins-quote { background: linear-gradient(150deg, #1d2541 0%, #161d33 100%); border-color: var(--line); }
html[data-theme="dark"] .ins-otd .otd-year { color: #ffb3b7; }
html[data-theme="dark"] .section-insights .ins-otd .otd-day { color: #ff7f86; }

/* ---------------------------------------------------------
   4. EXPLORE SINDH BY REGION - map + region cards
   --------------------------------------------------------- */
.region-layout.has-map { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.55fr); gap: 22px; align-items: start; }
.region-map {
    position: sticky;
    top: 92px;
    margin: 0;
    padding: 26px 16px 14px;
    border-radius: 22px;
    border: 1px solid var(--line);
    background: radial-gradient(circle at 20% 90%, rgba(29, 111, 168, .12), transparent 45%), linear-gradient(160deg, #f6f1e7 0%, #fff 70%);
    box-shadow: var(--home-shadow, 0 10px 26px rgba(11, 26, 58, .06));
    overflow: hidden;
}
.region-map::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 12px; background: var(--ajrak-border) center / 24px 12px repeat-x; }
.sindh-map { display: block; width: 100%; height: auto; color: #fff; overflow: visible; }
.sm-shadow { fill: rgba(11, 26, 58, .14); transform: translate(5px, 7px); }
.sm-region { --rc: #0f766e; cursor: pointer; }
.sm-region path { fill: var(--rc); fill-opacity: .86; stroke: #fff; stroke-width: 1.6; stroke-linejoin: round; transition: fill-opacity .25s ease, stroke-width .25s ease; }
.sm-region:hover path, .sm-region:focus-visible path { fill-opacity: 1; stroke-width: 2.6; }
.sm-region:focus-visible { outline: none; }
.sm-karachi  { --rc: #1d6fa8; }
.sm-laar     { --rc: #7d6410; }
.sm-vicholo  { --rc: #a8155f; }
.sm-kohistan { --rc: #8b4513; }
.sm-siro     { --rc: #0e7a4b; }
.sm-thar     { --rc: #b3470f; }
.sm-texture { pointer-events: none; opacity: .5; }
.sm-outline { fill: none; stroke: var(--aj-indigo); stroke-width: 2.2; stroke-linejoin: round; pointer-events: none; }
.sm-indus { fill: none; stroke: #5bb8ff; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; filter: drop-shadow(0 0 2px rgba(255, 255, 255, .9)); }
.sm-city circle { fill: #fff; stroke: var(--aj-indigo); stroke-width: 1.6; pointer-events: none; }
.sm-label { pointer-events: none; }
.sm-label text { text-anchor: middle; fill: #fff; paint-order: stroke; stroke: rgba(11, 26, 58, .35); stroke-width: 3px; stroke-linejoin: round; }
.sm-label-out text { fill: var(--aj-indigo); stroke: rgba(255, 255, 255, .9); }
html[data-theme="dark"] .sm-label-out text { fill: #e9eef9; stroke: rgba(11, 26, 58, .8); }
.sm-sd { font-family: var(--font-arabic), serif; font-size: 18px; font-weight: 700; }
.sm-en { font-family: var(--font-sans); font-size: 9.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.sm-river { font-family: var(--font-serif); font-style: italic; font-size: 10.5px; font-weight: 600; fill: #e8f5ff; paint-order: stroke; stroke: #1d6fa8; stroke-width: 3px; pointer-events: none; }
.sm-sea { font-family: var(--font-serif); font-style: italic; font-size: 12px; fill: #1d6fa8; letter-spacing: .08em; }
.sm-north path { fill: var(--aj-red); }
.sm-north text { font: 700 10px var(--font-sans); fill: var(--aj-indigo); text-anchor: middle; }
.rm-cap { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; padding: 10px 6px 0; border-top: 1px dashed var(--line); font-size: 12.5px; color: var(--text-soft); }
.rm-cap span { display: inline-flex; align-items: center; gap: 6px; }
.rm-cap .icon { width: 14px; height: 14px; color: var(--aj-red); }
.rm-river i { width: 22px; height: 4px; border-radius: 4px; background: #5bb8ff; }
html[data-theme="dark"] .region-map { background: linear-gradient(160deg, #18213a 0%, #141c31 70%); }
html[data-theme="dark"] .sm-outline { stroke: #e9eef9; }
html[data-theme="dark"] .sm-sea, html[data-theme="dark"] .sm-north text { fill: #9cc9f0; }

/* map <-> card highlight (modern browsers, :has) */
.region-layout:has(.region-card:hover) .sm-region path { fill-opacity: .35; }
.region-layout:has(.rg-karachi:hover) .sm-karachi path,
.region-layout:has(.rg-laar:hover) .sm-laar path,
.region-layout:has(.rg-vicholo:hover) .sm-vicholo path,
.region-layout:has(.rg-kohistan:hover) .sm-kohistan path,
.region-layout:has(.rg-siro:hover) .sm-siro path,
.region-layout:has(.rg-thar:hover) .sm-thar path { fill-opacity: 1; stroke-width: 2.8; }
.region-layout:has(.sm-karachi:hover) .rg-karachi,
.region-layout:has(.sm-laar:hover) .rg-laar,
.region-layout:has(.sm-vicholo:hover) .rg-vicholo,
.region-layout:has(.sm-kohistan:hover) .rg-kohistan,
.region-layout:has(.sm-siro:hover) .rg-siro,
.region-layout:has(.sm-thar:hover) .rg-thar { transform: translateY(-4px); border-color: var(--rc); box-shadow: 0 16px 34px rgba(11, 26, 58, .14); }

.region-layout .region-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.region-layout .region-card { border-radius: 18px; padding: 20px 18px 18px; gap: 10px; background: linear-gradient(180deg, color-mix(in srgb, var(--rc) 7%, var(--card)) 0%, var(--card) 46%); }
.region-layout .region-card::before { left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 5px; background: linear-gradient(90deg, var(--rc), color-mix(in srgb, var(--rc) 50%, var(--aj-gold))); }
.region-layout .rg-head { align-items: center; justify-content: flex-start; gap: 12px; }
.region-layout .rg-icon { flex: 0 0 58px; width: 58px; height: 58px; border-radius: 16px; padding: 6px; background: color-mix(in srgb, var(--rc) 12%, var(--card)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rc) 25%, transparent); }
.region-layout .rg-icon .icon { width: 22px; height: 22px; color: var(--rc); }
.rg-shape { display: block; width: 100%; height: 100%; }
.rg-shape path { fill: var(--rc); stroke: #fff; stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.rg-names { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.region-layout .rg-title { margin: 0; font-size: 19px; }
.rg-sub { font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--rc); }
.region-layout .rg-count { align-self: flex-start; white-space: nowrap; }
.region-layout .region-card:hover { transform: translateY(-4px); }
html[data-theme="dark"] .rg-sub { color: color-mix(in srgb, var(--rc) 45%, #fff); }
html[data-theme="dark"] .rg-shape path { stroke: #141c31; }

/* ---------------------------------------------------------
   5. THE SEVEN HEROINES OF SHAH JO RISALO
   --------------------------------------------------------- */
.heroines.hr-band {
    position: relative;
    isolation: isolate;
    margin-top: 26px;
    padding: 38px 28px 30px;
    border: 1px solid var(--ps-surface-line);
    border-radius: 24px;
    color: var(--text, #1f2937);
    background: var(--ps-surface);
    box-shadow: var(--ps-surface-shadow);
    overflow: hidden;
}
.hr-band::before, .hr-band::after { content: ''; position: absolute; left: 0; right: 0; height: 14px; background: var(--ajrak-border) center / 28px 14px repeat-x; z-index: 1; }
.hr-band::before { top: 0; }
.hr-band::after { bottom: 0; }
.hr-head { position: relative; display: flex; align-items: center; gap: 18px; }
.hr-badge { width: 62px; height: 62px; }
.hr-titles { flex: 1 1 auto; min-width: 0; }
.hr-eyebrow { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--aj-red); }
.hr-eyebrow span { font-family: var(--font-arabic), serif; font-size: 14px; letter-spacing: 0; text-transform: none; }
.hr-band .heroines-title { display: block; margin: 4px 0 4px; font-size: 28px; line-height: 1.2; color: var(--ink, #0f1f4b); }
.hr-sub { margin: 0; max-width: 640px; font-size: 14px; line-height: 1.5; color: var(--text-soft, #5b6472); }
.hr-book { flex: 0 0 84px; width: 84px; height: 84px; color: var(--aj-gold-ink); opacity: .9; }
.hr-band .heroines-list.hr-grid {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    margin: 26px 0 6px;
    padding: 0;
    counter-reset: none;
}
.hr-band .hr-card {
    position: relative;
    flex: 0 1 calc(25% - 13px);
    min-width: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    padding: 22px 16px 18px;
    border-radius: 18px;
    text-align: center;
    color: var(--text-soft, #5b6472);
    background: linear-gradient(180deg, #fdf6ec 0%, var(--ps-surface) 55%);
    border: 1px solid var(--ps-surface-line);
    transition: transform .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.hr-band .hr-card:hover, .hr-band .hr-card:focus-within { transform: translateY(-5px); background: linear-gradient(180deg, #fbe9e7 0%, var(--ps-surface) 60%); border-color: var(--aj-red); box-shadow: 0 18px 32px rgba(143, 16, 21, .12); }
.hr-num { position: absolute; top: 12px; left: 14px; font-family: var(--font-serif); font-size: 15px; font-weight: 700; color: var(--aj-red); opacity: .75; }
.hr-medal { position: relative; width: 78px; height: 78px; margin: 8px 0 16px; display: inline-flex; align-items: center; justify-content: center; }
.hr-medal::before {
    content: '';
    position: absolute;
    inset: 9px;
    border-radius: 10px;
    transform: rotate(45deg);
    background: linear-gradient(135deg, var(--aj-red), var(--aj-deep));
    box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--aj-red), 0 12px 22px rgba(0, 0, 0, .35);
}
.hr-medal::after { content: ''; position: absolute; inset: -3px; border-radius: 16px; transform: rotate(45deg); border: 1.5px dashed rgba(168, 115, 15, .55); transition: transform .8s ease; }
.hr-card:hover .hr-medal::after { transform: rotate(135deg); }
.hr-medal-in { position: relative; z-index: 1; width: 38px; height: 38px; color: #fff; font: 700 24px/38px var(--font-serif); }
.hr-medal-in .ps-art { width: 100%; height: 100%; }
.hr-band .hr-name { margin: 0; font-family: var(--font-serif); font-size: 20px; line-height: 1.2; color: var(--ink, #0f1f4b); }
.hr-band .hr-name a, .hr-band .heroines-list strong { display: inline; color: var(--ink, #0f1f4b); font-family: inherit; font-size: inherit; }
.hr-band .hr-card:hover .hr-name a strong, .hr-band .heroines-list a:hover strong { color: var(--aj-red); }
.hr-sd { display: block; margin-top: 3px; font-family: var(--font-arabic), serif; font-size: 18px; font-weight: 700; color: var(--aj-gold-ink); }
.hr-sur { display: inline-block; margin: 10px 0 10px; padding: 3px 11px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--aj-deep); background: rgba(196, 22, 28, .07); border: 1px solid rgba(196, 22, 28, .2); }
.hr-text { display: block; font-size: 13.5px; line-height: 1.55; color: var(--text-soft, #5b6472); }
.hr-place { display: inline-flex; align-items: center; gap: 5px; margin-top: auto; padding-top: 12px; font-size: 12px; color: var(--muted, #6b7280); }
.hr-place .icon { width: 13px; height: 13px; color: var(--aj-red); }
html[data-theme="dark"] .heroines.hr-band { box-shadow: none; }
html[data-theme="dark"] .hr-band .hr-card { background: linear-gradient(180deg, rgba(255, 255, 255, .05) 0%, var(--ps-surface) 60%); }
html[data-theme="dark"] .hr-band .hr-card:hover { background: linear-gradient(180deg, rgba(196, 22, 28, .18) 0%, var(--ps-surface) 60%); }
html[data-theme="dark"] .hr-sd, html[data-theme="dark"] .hr-book { color: var(--aj-gold); }
html[data-theme="dark"] .hr-sur { color: #ffb3b7; background: rgba(196, 22, 28, .14); border-color: rgba(255, 127, 134, .3); }
html[data-theme="dark"] .hr-eyebrow, html[data-theme="dark"] .hr-num { color: #ff7f86; }
/* inside articles ([paksindh_poets] shortcode) */
.post-content .hr-band h3, .post-content .hr-band h4 { margin: 0; color: var(--ink, #0f1f4b); }
.post-content .hr-band .hr-card { margin: 0; }
.post-content .hr-band p { margin: 0; }

/* ---------------------------------------------------------
   7. WHITE SURFACES (v5.3.1) - The Land of the Indus,
      Coming Up in Sindh and Plan your trip in Sindh now match
      the other white homepage sections (Ajrak top border kept).
   --------------------------------------------------------- */
/* The Land of the Indus (Sindh at a Glance) */
.section-glance {
    color: var(--text, #1f2937);
    background: var(--ps-surface);
    border: 1px solid var(--ps-surface-line);
    box-shadow: var(--ps-surface-shadow);
}
.section-glance::after { content: none; }
.section-glance::before { height: 12px; background: var(--ajrak-border) center / 24px 12px repeat-x; opacity: 1; }
.glance-kicker { background: var(--aj-red); color: #fff; }
.glance-title { color: var(--ink, #0f1f4b); }
.glance-text { color: var(--text-soft, #5b6472); }
.glance-src { color: var(--muted, #6b7280); }
.glance-item {
    background: linear-gradient(180deg, #fdf6ec 0%, var(--ps-surface) 100%);
    border: 1px solid var(--ps-surface-line);
    color: var(--ink, #0f1f4b);
}
a.glance-item:hover, a.glance-item:focus-visible { background: var(--ps-surface); border-color: var(--aj-red); color: var(--ink, #0f1f4b); box-shadow: 0 12px 24px rgba(143, 16, 21, .1); }
.gl-icon { background: linear-gradient(135deg, var(--aj-red), var(--aj-deep)); color: #fff; }
.gl-value { color: var(--ink, #0f1f4b); }
.gl-label { color: var(--muted, #6b7280); }
.gl-note { color: var(--aj-gold-ink); }
html[data-theme="dark"] .section-glance { background: var(--ps-surface); border-color: var(--ps-surface-line); }
html[data-theme="dark"] .glance-item { background: rgba(255, 255, 255, .03); }
html[data-theme="dark"] .gl-note { color: var(--aj-gold); }

/* Coming Up in Sindh (festival countdown) */
body[class*="ps-home-"] .section-festivals .festival-strip {
    background: var(--ps-surface);
    border: 1px solid var(--ps-surface-line);
    box-shadow: var(--ps-surface-shadow);
    padding-top: 30px;
}
body[class*="ps-home-"] .section-festivals .festival-strip::before { height: 12px; background: var(--ajrak-border) center / 24px 12px repeat-x; }
body[class*="ps-home-"] .section-festivals .ft {
    background: linear-gradient(180deg, #fdf6ec 0%, var(--ps-surface) 100%);
    border: 1px solid var(--ps-surface-line);
}
body[class*="ps-home-"] .section-festivals .ft:hover { background: var(--ps-surface); border-color: var(--aj-red); box-shadow: 0 12px 24px rgba(143, 16, 21, .1); }
body[class*="ps-home-"] .section-festivals .ft-icon { background: linear-gradient(135deg, var(--aj-red), var(--aj-deep)); color: #fff; }
body[class*="ps-home-"] .section-festivals .ft-name { color: var(--ink, #0f1f4b); }
body[class*="ps-home-"] .section-festivals .ft-note,
body[class*="ps-home-"] .section-festivals .ft-when { color: var(--muted, #6b7280); }
body[class*="ps-home-"] .section-festivals .ft-count { background: rgba(196, 22, 28, .08); color: var(--aj-red); }
body[class*="ps-home-"] .section-festivals .ft-first { background: linear-gradient(180deg, #fff3d6 0%, var(--ps-surface) 100%); border-color: var(--aj-gold); box-shadow: inset 0 3px 0 var(--aj-gold); }
body[class*="ps-home-"] .section-festivals .ft-first .ft-icon { background: var(--aj-gold); color: #2a1a00; }
body[class*="ps-home-"] .section-festivals .ft-first .ft-name { color: var(--ink, #0f1f4b); }
body[class*="ps-home-"] .section-festivals .ft-first .ft-note,
body[class*="ps-home-"] .section-festivals .ft-first .ft-when { color: var(--text-soft, #5b6472); }
body[class*="ps-home-"] .section-festivals .ft-first .ft-count { background: var(--aj-red); color: #fff; }
body[class*="ps-home-"] .section-festivals .ft.ft-now:not(.ft-first) { border-color: #0e7a4b; box-shadow: inset 3px 0 0 #0e7a4b; }
body[class*="ps-home-"] .section-festivals .ft-now:not(.ft-first) .ft-count { background: rgba(14, 122, 75, .1); color: #0e7a4b; }
body[class*="ps-home-"] .section-festivals .pw-note { color: var(--muted, #6b7280); }
html[data-theme="dark"] body[class*="ps-home-"] .section-festivals .ft { background: rgba(255, 255, 255, .03); }
html[data-theme="dark"] body[class*="ps-home-"] .section-festivals .ft-first { background: rgba(233, 185, 73, .08); }
html[data-theme="dark"] body[class*="ps-home-"] .section-festivals .ft-count { color: #ff7f86; }
html[data-theme="dark"] body[class*="ps-home-"] .section-festivals .ft-first .ft-count { color: #fff; }

/* Plan your trip in Sindh (route planner) */
body .route-planner {
    padding-top: 26px;
    color: var(--text, #1f2937);
    background: var(--ps-surface);
    border: 1px solid var(--ps-surface-line);
    box-shadow: var(--ps-surface-shadow);
    overflow: visible;
}
body .route-planner::before { height: 12px; background: var(--ajrak-border) center / 24px 12px repeat-x; opacity: 1; }
body .route-planner .rp-intro-icon { background: linear-gradient(135deg, var(--aj-red), var(--aj-deep)); }
body .route-planner .rp-title { color: var(--ink, #0f1f4b); }
body .route-planner .rp-sub { color: var(--text-soft, #5b6472); }
body .route-planner .rp-field label { color: var(--muted, #6b7280); }
body .route-planner .rp-input { border-color: var(--ps-surface-line); background: #fff; }
body .route-planner .rp-input:focus { border-color: var(--aj-red); box-shadow: 0 0 0 3px rgba(196, 22, 28, .14); }
body .route-planner .rp-swap { border-color: var(--ps-surface-line); background: #fbf8f3; color: var(--ink, #0f1f4b); }
body .route-planner .rp-swap:hover { background: #fff; border-color: var(--aj-red); color: var(--aj-red); }
body .route-planner .rp-status { color: var(--text, #1f2937); }
body .route-planner .rp-status.is-error { color: var(--aj-deep); }
body .route-planner.is-busy .rp-status::before { border-color: rgba(15, 31, 75, .2); border-top-color: var(--aj-red); }
body .route-planner .rp-summary, body .route-planner .rp-areas { border: 1px solid var(--ps-surface-line); background: #fffdf9; }
html[data-theme="dark"] body .route-planner .rp-status { color: var(--text); }
html[data-theme="dark"] body .route-planner .rp-status.is-error { color: #ffb3b7; }
html[data-theme="dark"] body .route-planner .rp-summary, html[data-theme="dark"] body .route-planner .rp-areas { background: #0f172a; }
html[data-theme="dark"] body .route-planner .rp-swap { background: rgba(255, 255, 255, .06); color: var(--ink); }

/* ---------------------------------------------------------
   6. RESPONSIVE
   --------------------------------------------------------- */
@media (max-width: 1180px) {
    .discover-band .db-grid { gap: 14px; }
    .db-body { padding: 32px 13px 14px; }
    .db-label { font-size: 16.5px; }
    .hr-band .hr-card { flex-basis: calc(33.333% - 12px); }
}
@media (max-width: 1024px) {
    .region-layout.has-map { grid-template-columns: minmax(0, 1fr); }
    .region-map { position: relative; top: 0; display: grid; grid-template-columns: minmax(0, 1fr); max-width: 560px; width: 100%; margin: 0 auto; }
}
@media (max-width: 860px) {
    /* swipeable row of cards */
    .discover-band .db-grid {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 46%;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 2px;
        padding: 8px 2px 14px;
        margin-left: -2px; margin-right: -2px;
        scrollbar-width: thin;
        scrollbar-color: color-mix(in srgb, var(--aj-red) 55%, transparent) transparent;
    }
    .discover-band .db-grid::-webkit-scrollbar { height: 5px; }
    .discover-band .db-grid::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--aj-red) 55%, transparent); border-radius: 9px; }
    .discover-band .db-grid li { scroll-snap-align: start; }
    .discover-band .db-card:hover, .discover-band .db-card:focus-visible { transform: translateY(-3px); }
}
@media (max-width: 760px) {
    .topic-strip.discover-band { padding: 30px 16px 20px; border-radius: 20px; }
    .topic-strip.discover-band::after { display: none; }
    .discover-band .ts-title { font-size: 25px; }
    .db-sd { font-size: 22px; }
    .db-badge { width: 50px; height: 50px; }
    .db-more { order: 3; }
    .lp-grid .ps-learn, .lp-grid .ps-quiz { padding-left: 18px; padding-right: 18px; }
    .ps-learn .ps-phrase .ps-sd { font-size: 30px; }
    .lp-art-quiz { width: 60px; height: 60px; padding: 11px; top: 24px; right: 14px; }
    .ps-quiz .ps-quiz-start h3 { padding-right: 66px; font-size: 21px; }
    .ps-quiz .ps-quiz-start > p:first-of-type { padding-right: 0; }
    .region-layout .region-grid { grid-template-columns: minmax(0, 1fr); }
    .heroines.hr-band { padding: 34px 16px 26px; border-radius: 20px; }
    .hr-head { flex-wrap: wrap; gap: 14px; }
    .hr-book { display: none; }
    .hr-band .heroines-title { font-size: 23px; }
    .hr-band .hr-card { flex-basis: calc(50% - 9px); padding: 18px 12px 16px; }
    .hr-medal { width: 64px; height: 64px; }
    .hr-medal-in { width: 30px; height: 30px; }
    .hr-band .hr-name { font-size: 18px; }
    body[class*="ps-home-"] .home-head .hh-ajrak { width: 44px; height: 44px; }
}
@media (max-width: 560px) {
    .discover-band .db-grid { grid-auto-columns: 76%; gap: 12px; }
}
@media (max-width: 420px) {
    .hr-band .heroines-list.hr-grid { gap: 10px; }
    .hr-band .hr-card { flex-basis: calc(50% - 6px); padding: 16px 10px 14px; }
    .hr-text { font-size: 12.5px; }
    .hr-sur { font-size: 10px; letter-spacing: .03em; padding: 3px 8px; }
}
@media (max-width: 340px) {
    .hr-band .hr-card { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .aj-badge .aj-svg, .hr-medal::after, .ins-art, .db-scene, .db-photo, .db-icon, .db-cta,
    .discover-band .db-card, .discover-band .db-card::after, .hr-band .hr-card, .region-layout .region-card, .sm-region path { transition: none !important; }
    *:hover > .aj-badge .aj-svg, .home-head:hover .aj-badge .aj-svg,
    .db-card:hover .db-scene, .db-card:hover .db-photo, .db-card:hover .db-icon, .hr-card:hover .hr-medal::after, .ins-card:hover .ins-art,
    .discover-band .db-card:hover, .hr-band .hr-card:hover, .region-layout .region-card:hover { transform: none !important; }
}
@media print {
    .topic-strip.discover-band, .heroines.hr-band, .section-glance, .route-planner { background: #fff; color: #000; box-shadow: none; }
    .region-map, .ins-art, .lp-art, .db-cta { display: none !important; }
}

/* =========================================================
   v5.6 - Discover Sindh arrows, real photos in Poets & Legends,
   Sindh Through the Ages and Coming Up in Sindh
   ========================================================= */

/* ---- shared photo + credit line (licence attribution) ---- */
.ps-photo { display: block; width: 100%; height: 100%; object-fit: cover; }
.ps-credit {
    position: absolute;
    right: 0; bottom: 0;
    max-width: 100%;
    padding: 2px 7px 2px 9px;
    border-top-left-radius: 8px;
    background: rgba(8, 14, 32, .58);
    color: rgba(255, 255, 255, .9);
    font: 500 9.5px/1.35 var(--font-sans, system-ui, sans-serif);
    letter-spacing: .1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: auto;
    z-index: 2;
}
.ps-credits-list { padding-left: 1.2em; font-size: 14px; line-height: 1.6; }
.ps-credits-list li { margin: 0 0 6px; }

/* ---- Discover Sindh: arrows + dots (only when the cards scroll, <= 860px) ---- */
.discover-band .db-slider { position: relative; }
.discover-band .db-controls { display: none; }
@media (max-width: 860px) {
    .discover-band .db-controls:not([hidden]) {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        margin: 4px auto 0;
    }
    .discover-band .db-nav {
        flex: 0 0 38px;
        width: 38px; height: 38px;
        display: inline-flex; align-items: center; justify-content: center;
        padding: 0 0 3px;
        border: 1px solid var(--ps-surface-line, #e6dccb);
        border-radius: 50%;
        background: var(--ps-surface, #fff);
        color: var(--aj-red, #c4161c);
        font-size: 26px; line-height: 1;
        box-shadow: 0 4px 12px rgba(11, 26, 58, .1);
        cursor: pointer;
        transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
        -webkit-tap-highlight-color: transparent;
    }
    .discover-band .db-nav:hover,
    .discover-band .db-nav:focus-visible { background: var(--aj-red, #c4161c); border-color: var(--aj-red, #c4161c); color: #fff; }
    .discover-band .db-nav:active { transform: scale(.94); }
    .discover-band .db-nav:focus-visible { outline: 3px solid color-mix(in srgb, var(--aj-red, #c4161c) 35%, transparent); outline-offset: 2px; }
    .discover-band .db-dots { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; max-width: 60%; }
    .discover-band .db-dot {
        position: relative;
        width: 8px; height: 8px;
        padding: 0; border: 0; border-radius: 6px;
        background: color-mix(in srgb, var(--aj-red, #c4161c) 25%, transparent);
        cursor: pointer;
        transition: width .3s ease, background .3s ease;
    }
    .discover-band .db-dot::before { content: ''; position: absolute; inset: -7px -3px; }
    .discover-band .db-dot.is-active { width: 22px; background: var(--aj-red, #c4161c); }
    /* thinner scrollbar now that there are arrows */
    .discover-band .db-slider.is-scrolling .db-grid { padding-bottom: 10px; }
}
html[data-theme="dark"] .discover-band .db-nav { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); color: #ff8a90; box-shadow: none; }
html[data-theme="dark"] .discover-band .db-nav:hover { background: var(--aj-red, #c4161c); color: #fff; }
html[data-theme="dark"] .discover-band .db-dot { background: rgba(255, 255, 255, .22); }
html[data-theme="dark"] .discover-band .db-dot.is-active { background: #ff6b72; }

/* ---- Poets & Legends: shrine / portrait photo on top of each card ---- */
.poet-card.has-media { flex-direction: column; gap: 0; padding: 0; overflow: hidden; }
.poet-card.has-media .poet-initial { display: none; }
.poet-card.has-media .poet-body { padding: 14px 16px 16px; }
.poet-media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: linear-gradient(135deg, #0f7146, #0b5d3b);
}
.poet-media .ps-photo { transition: transform .5s ease; }
.poet-card:hover .poet-media .ps-photo { transform: scale(1.05); }
.poet-media::after {             /* soft fade into the card */
    content: '';
    position: absolute; left: 0; right: 0; bottom: 0;
    height: 34%;
    background: linear-gradient(180deg, transparent, rgba(8, 14, 32, .28));
    pointer-events: none;
}
.poet-media.no-photo {
    display: grid; place-items: center;
    background:
        url('assets/ajrak-pattern.svg') center / 22px repeat,
        linear-gradient(135deg, #0f7146, #0b5d3b);
    background-blend-mode: soft-light, normal;
}
.poet-media.no-photo::after { display: none; }
.poet-media-initial {
    width: 74px; height: 74px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    box-shadow: 0 0 0 6px rgba(255, 255, 255, .08);
    color: #fff;
    font: 700 34px/1 var(--font-serif, Georgia, serif);
}
.post-content .poet-media img { margin: 0; border-radius: 0; }
@media (max-width: 560px) {
    /* compact row: thumbnail left, text right */
    .poet-card.has-media { flex-direction: row; align-items: stretch; }
    .poet-card.has-media .poet-media { flex: 0 0 104px; aspect-ratio: auto; min-height: 112px; }
    .poet-card.has-media .poet-body { padding: 12px 14px; }
    .poet-card.has-media .ps-credit { left: 0; border-top-left-radius: 0; font-size: 8.5px; padding: 2px 5px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
    .poet-media-initial { width: 54px; height: 54px; font-size: 25px; box-shadow: 0 0 0 4px rgba(255, 255, 255, .08); }
}
@media (prefers-reduced-motion: reduce) {
    .poet-media .ps-photo { transition: none; }
    .poet-card:hover .poet-media .ps-photo { transform: none; }
}

/* ---- Sindh Through the Ages: photo at the top of each era card ---- */
.tl-item.has-photo .tl-card { overflow: visible; }
.tl-photo {
    position: relative;
    display: block;
    margin: -18px -18px 4px;
    aspect-ratio: 16 / 10;
    border-radius: 15px 15px 0 0;
    overflow: hidden;
    background: color-mix(in srgb, #8b4513 18%, var(--card, #fff));
}
.tl-photo .ps-photo { transition: transform .5s ease; }
.tl-item:hover .tl-photo .ps-photo { transform: scale(1.05); }
.tl-item.has-photo .tl-card::before { z-index: 3; }        /* keep the little pointer above the photo */
.tl-item.has-photo .tl-when { margin-top: 2px; }
@media (prefers-reduced-motion: reduce) {
    .tl-photo .ps-photo { transition: none; }
    .tl-item:hover .tl-photo .ps-photo { transform: none; }
}

/* ---- Coming Up in Sindh: photo banner on every countdown card ---- */
body[class*="ps-home-"] .section-festivals .ft.has-photo { padding-top: 0; overflow: hidden; }
body[class*="ps-home-"] .section-festivals .ft-media {
    position: relative;
    display: block;
    width: calc(100% + 32px);
    margin: 0 -16px;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #e9dfcf;
}
body[class*="ps-home-"] .section-festivals .ft-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
body[class*="ps-home-"] .section-festivals .ft.has-photo:hover .ft-media img { transform: scale(1.05); }
body[class*="ps-home-"] .section-festivals .ft-media::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(8, 14, 32, .35) 0%, transparent 38%, transparent 70%, rgba(8, 14, 32, .25) 100%);
    pointer-events: none;
}
body[class*="ps-home-"] .section-festivals .ft.has-photo .ft-icon {
    position: relative;
    z-index: 2;
    margin-top: -33px;
    margin-bottom: -4px;
    box-shadow: 0 0 0 3px var(--ps-surface, #fff), 0 6px 14px rgba(11, 26, 58, .2);
}
body[class*="ps-home-"] .section-festivals .ft.has-photo .ft-count {
    top: 10px; right: 10px;
    z-index: 3;
    background: rgba(8, 14, 32, .72);
    color: #fff;
    backdrop-filter: blur(3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
}
body[class*="ps-home-"] .section-festivals .ft.has-photo.ft-first .ft-count { background: var(--aj-red, #c4161c); color: #fff; }
body[class*="ps-home-"] .section-festivals .ft.has-photo.ft-now:not(.ft-first) .ft-count { background: #0e7a4b; color: #fff; }
body[class*="ps-home-"] .section-festivals .ft.has-photo.ft-first { box-shadow: inset 0 -3px 0 var(--aj-gold, #e9b949); }
html[data-theme="dark"] body[class*="ps-home-"] .section-festivals .ft.has-photo .ft-icon { box-shadow: 0 0 0 3px var(--ps-surface, #141c31), 0 6px 14px rgba(0, 0, 0, .4); }
@media (prefers-reduced-motion: reduce) {
    body[class*="ps-home-"] .section-festivals .ft-media img { transition: none; }
}
/* credit line stays clear of the round icon */
body[class*="ps-home-"] .section-festivals .ft-media .ps-credit { max-width: calc(100% - 68px); }