/* PakSindh - Discover Sindh sections (Learn Sindhi, Quiz, Poets & Legends, Visitor's Guide) */

.ps-kicker { display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--red); margin-bottom: 10px; }
html[data-theme="dark"] .ps-kicker { color: #ff7f86; }

.ps-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border: 0; border-radius: 999px; background: var(--green); color: #fff; font: 600 13.5px/1.2 var(--font-sans); cursor: pointer; transition: background .2s ease, transform .1s ease; text-decoration: none; }
.ps-btn:hover, .ps-btn:focus-visible { background: var(--red); color: #fff; }
.ps-btn:active { transform: scale(.96); }
.ps-btn .icon { width: 15px; height: 15px; }
.ps-btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.ps-btn-ghost:hover { background: var(--cream); color: var(--red); }
.ps-btn-wa { background: #1f9d55; }
.ps-learn-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }

/* ---------- Learn & Play row ---------- */
.learn-play-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.learn-play-grid.is-single { grid-template-columns: minmax(0, 1fr); }

/* ---------- Learn Sindhi ---------- */
.ps-learn { position: relative; overflow: hidden; background: linear-gradient(135deg, #fff 0%, #f8f1e4 100%); }
.ps-learn::after { content: ''; position: absolute; right: -40px; top: -40px; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, rgba(179,20,27,.10), transparent 70%); pointer-events: none; }
html[data-theme="dark"] .ps-learn { background: linear-gradient(135deg, #18213a 0%, #141c31 100%); }
.ps-phrase { padding: 6px 0 2px; }
.ps-phrase .ps-sd { margin: 0; font-family: var(--font-arabic), serif; font-size: 34px; line-height: 1.6; color: var(--ink); text-align: right; }
.ps-phrase .ps-roman { margin: 2px 0 0; font-family: var(--font-serif); font-size: 21px; font-weight: 700; color: var(--red); }
html[data-theme="dark"] .ps-phrase .ps-roman { color: #ff7f86; }
.ps-phrase .ps-en { margin: 2px 0 0; color: var(--muted); font-size: 15px; }

.ps-book { margin-top: 16px; border-top: 1px dashed var(--line); padding-top: 12px; }
.ps-book summary { cursor: pointer; font-weight: 600; color: var(--ink); }
.ps-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.ps-tab { border: 1px solid var(--line); background: var(--card); color: var(--ink); padding: 5px 12px; border-radius: 999px; font: 500 12.5px/1.2 var(--font-sans); cursor: pointer; }
.ps-tab.is-active { background: var(--navy); border-color: var(--navy); color: #fff; }
html[data-theme="dark"] .ps-tab.is-active { background: var(--red); border-color: var(--red); }
.ps-list { list-style: none; margin: 0; padding: 0; max-height: 340px; overflow-y: auto; }
.ps-list li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "roman sd" "en en"; gap: 0 12px; padding: 9px 2px; border-bottom: 1px solid var(--line); }
.ps-list li[hidden] { display: none; }
.ps-list .ps-sd { grid-area: sd; font-family: var(--font-arabic), serif; font-size: 19px; text-align: right; color: var(--ink); }
.ps-list .ps-roman { grid-area: roman; font-weight: 600; color: var(--ink); }
.ps-list .ps-en { grid-area: en; font-size: 13px; color: var(--muted); }

/* ---------- Quiz ---------- */
.ps-quiz { background: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%); color: #e9eef9; border-color: transparent; position: relative; overflow: hidden; }
.ps-quiz::before { content: ''; position: absolute; inset: auto -30px -30px auto; width: 170px; height: 170px; background: url("assets/ajrak-pattern.svg") center / 60px repeat; opacity: .10; border-radius: 50%; pointer-events: none; }
.ps-quiz .ps-kicker { color: #ffb3b7; }
.ps-quiz h3 { color: #fff; margin: 0 0 8px; font-size: 21px; }
.ps-quiz p { color: rgba(233,238,249,.88); }
.ps-quiz-best { font-size: 13px; margin: 12px 0 0; }
.ps-quiz-top { display: flex; justify-content: space-between; font-size: 12.5px; color: rgba(233,238,249,.8); }
.ps-quiz-bar { height: 5px; background: rgba(255,255,255,.15); border-radius: 99px; margin: 8px 0 14px; overflow: hidden; }
.ps-quiz-bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--red-bright), #f2b33d); transition: width .35s ease; }
.ps-quiz-q { outline: none; }
.ps-quiz-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 12px 0; }
.ps-opt { text-align: left; padding: 11px 13px; border-radius: 10px; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.06); color: #fff; font: 500 14px/1.35 var(--font-sans); cursor: pointer; transition: background .2s ease, border-color .2s ease; }
.ps-opt:hover:not(:disabled), .ps-opt:focus-visible { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.5); }
.ps-opt:disabled { cursor: default; opacity: .75; }
.ps-opt.is-right { background: #0e7a4b; border-color: #22c07a; opacity: 1; }
.ps-opt.is-wrong { background: #8f1015; border-color: #ff6b72; opacity: 1; }
.ps-quiz-exp { min-height: 1.4em; font-size: 14px; margin: 4px 0 12px; }
.ps-quiz-exp.ok { color: #8ff0bf; }
.ps-quiz-exp.no { color: #ffc2c5; }
.ps-quiz-result { font-size: 26px; outline: none; }
.ps-quiz .ps-btn:hover { background: var(--red-bright); }

/* ---------- Poets & Legends ---------- */
.poets-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.poet-card { position: relative; display: flex; gap: 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; transition: box-shadow .25s ease, transform .25s ease; }
.poet-card:hover { box-shadow: 0 10px 26px rgba(15,31,75,.10); transform: translateY(-2px); }
.poet-initial { flex: 0 0 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--red) 0%, var(--navy) 100%); color: #fff; font: 700 21px/1 var(--font-serif); }
.poet-body h3 { margin: 0 0 3px; font-size: 17px; }
.poet-body h3 a { color: var(--ink); }
.poet-body h3 a::after { content: ''; position: absolute; inset: 0; }
.poet-card:hover h3 a { color: var(--red); }
.poet-meta { display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.poet-body p { margin: 0; font-size: 13.5px; color: var(--text-soft); line-height: 1.55; }

.heroines { margin-top: 18px; background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--red); border-radius: var(--radius); padding: 16px 18px; }
.heroines-title { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 18px; }
.heroines-title .icon { width: 18px; height: 18px; color: var(--red); }
.heroines-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px 18px; }
.heroines-list li { font-size: 13.5px; line-height: 1.5; color: var(--text-soft); }
.heroines-list strong { display: block; color: var(--ink); font-family: var(--font-serif); font-size: 15.5px; }
.heroines-list a:hover strong { color: var(--red); }

/* ---------- Visitor's guide ---------- */
.guide-grid { display: grid; grid-template-columns: 1.15fr 1.15fr .9fr; gap: 18px; align-items: start; }
.season-list, .tips-list, .help-list { list-style: none; margin: 0; padding: 0; }
.season { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.season:last-child { border-bottom: 0; }
.season-when { flex: 0 0 82px; align-self: flex-start; text-align: center; padding: 5px 6px; border-radius: 6px; font-size: 12px; font-weight: 700; color: #fff; background: var(--green); }
.season-hot .season-when { background: #c2410c; }
.season-rain .season-when { background: #1d4ed8; }
.season strong { color: var(--ink); }
.season p { margin: 2px 0 0; font-size: 13.5px; color: var(--text-soft); line-height: 1.5; }
.tips-list li { position: relative; padding: 7px 0 7px 22px; font-size: 13.5px; line-height: 1.5; color: var(--text-soft); border-bottom: 1px dashed var(--line); }
.tips-list li:last-child { border-bottom: 0; }
.tips-list li::before { content: ''; position: absolute; left: 4px; top: 14px; width: 8px; height: 8px; background: var(--red); transform: rotate(45deg); }
.help-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.help-list a { display: flex; flex-direction: column; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--cream); color: var(--ink); transition: border-color .2s ease; }
.help-list a:hover { border-color: var(--red); }
.help-list span { font-size: 12px; color: var(--muted); }
.help-list b { font-size: 19px; color: var(--red); font-family: var(--font-serif); }
html[data-theme="dark"] .help-list b { color: #ff7f86; }
.guide-help .explore-btn { margin-top: 6px; }

/* shortcode embeds inside articles */
.post-content .ps-embed, .post-content .ps-learn, .post-content .ps-quiz { margin: 24px 0; }
.post-content .ps-embed .poets-grid, .post-content .ps-embed .guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.post-content .ps-list, .post-content .tips-list, .post-content .help-list, .post-content .season-list, .post-content .heroines-list { padding-left: 0; }
.post-content .ps-list li, .post-content .tips-list li { margin: 0; }
.post-content .poet-body h3, .post-content .ps-quiz h3 { margin-top: 0; }

.discover-intro { max-width: 820px; margin: 10px 0 0; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
    .poets-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .guide-grid { grid-template-columns: 1fr 1fr; }
    .guide-help { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
    .learn-play-grid, .poets-grid, .guide-grid,
    .post-content .ps-embed .poets-grid, .post-content .ps-embed .guide-grid { grid-template-columns: minmax(0, 1fr); }
    .ps-quiz-opts { grid-template-columns: minmax(0, 1fr); }
    .ps-phrase .ps-sd { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) {
    .poet-card, .ps-quiz-bar span, .ps-btn { transition: none; }
    .poet-card:hover { transform: none; }
}
@media print {
    .ps-quiz, .ps-learn-actions, .ps-tabs { display: none !important; }
}