/* =========================================================
   QURANKSA: ISLAMIC STUDIES
   Page-only stylesheet. Shared header/footer use exact-home.css
   and final-header.css, as on the approved homepage.
   ========================================================= */
:root {
    --studies-forest: #0e4b3d;
    --studies-deep: #073d32;
    --studies-gold: #c49a4e;
    --studies-cream: #f8f7f1;
    --studies-ink: #0b2029;
}
.studies-container {
    width: min(1266px, calc(100% - 48px));
    margin-inline: auto;
}
.studies-hero {
    overflow: hidden;
    background: radial-gradient(circle at 24% 24%, #fff 0%, #f8f7f1 67%);
}
.studies-hero-inner {
    max-width: 1536px;
    min-height: 580px;
    margin: auto;
    display: grid;
    grid-template-columns: 55% 45%;
}
.studies-hero-copy {
    position: relative;
    z-index: 1;
    padding: 82px 32px 55px max(38px, calc((100vw - 1266px) / 2));
}
.studies-hero h1 {
    font: 600 clamp(46px, 4.3vw, 68px)/1.13 var(--display-font, Georgia, serif);
    letter-spacing: -.045em;
    margin: 18px 0 22px;
}
.studies-hero h1 span { color: var(--studies-gold); }
.studies-lead {
    max-width: 660px;
    font-size: clamp(17px, 1.5vw, 20px);
    line-height: 1.55;
    margin: 0 0 15px;
}
.studies-support {
    max-width: 630px;
    font-size: 15px;
    line-height: 1.7;
    color: #59635e;
    margin: 0;
}
.studies-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 27px; }
.studies-hero-notes {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin-top: 48px;
    color: #475b51;
    font-size: 13px;
}
.studies-hero-notes span { padding: 0 23px; border-left: 1px solid #d7cdb9; }
.studies-hero-notes span:first-child { padding-left: 0; border-left: 0; }
.studies-hero-notes b { color: var(--studies-forest); font-size: 18px; margin-right: 4px; }
.studies-hero-visual {
    min-height: 580px;
    position: relative;
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, #125d4c 0%, #073d32 74%);
    overflow: hidden;
}
.studies-hero-visual::before,
.studies-hero-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .13;
    background-image: repeating-linear-gradient(45deg, transparent 0 36px, #d2b36f 37px 38px, transparent 39px 74px);
}
.studies-hero-visual::after { transform: rotate(90deg); opacity: .08; }
.arch-outer {
    position: relative;
    z-index: 1;
    width: min(75%, 380px);
    height: 480px;
    padding: 9px;
    background: linear-gradient(135deg, #eed49a, #b7832f 70%, #f5e2af);
    border-radius: 185px 185px 14px 14px;
    box-shadow: 0 24px 60px #001f184d;
}
.arch-inner {
    width: 100%;
    height: 100%;
    border-radius: 178px 178px 8px 8px;
    border: 1px solid #f5dfa7;
    background: radial-gradient(circle at 50% 33%, #195e4e, #06392f 80%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fdf9ec;
    padding: 35px;
}
.arch-star { font-size: 26px; color: #d8b56f; margin-bottom: 12px; }
.arch-arabic { font-family: Georgia, serif; font-size: 73px; color: #e8cc90; line-height: 1.5; }
.arch-divider { width: 55px; height: 2px; background: #d3ae66; margin: 5px 0 24px; }
.arch-title { font: 600 34px/1.28 var(--display-font, Georgia, serif); }
.arch-caption { font-size: 12px; line-height: 1.6; color: #d8e7df; margin-top: 20px; max-width: 180px; }
.floating-seal {
    position: absolute;
    z-index: 2;
    top: 58px;
    right: 7%;
    display: grid;
    place-content: center;
    width: 100px;
    height: 100px;
    border: 4px solid #f7e5b7;
    outline: 1px solid #d3a859;
    border-radius: 50%;
    background: #bc904b;
    color: white;
    font: 600 35px/1 var(--display-font, Georgia, serif);
    text-align: center;
    box-shadow: 0 8px 20px #05251b40;
}
.floating-seal small { font: 700 10px var(--body-font, Arial, sans-serif); letter-spacing: .13em; margin-top: 4px; }
.studies-purpose { padding: 92px 0; background: #fff; }
.purpose-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(35px, 6vw, 110px); align-items: center; }
.purpose-intro h2,
.studies-section-heading h2,
.studies-heading-center h2,
.studies-cta h2 {
    font: 600 clamp(34px, 3.2vw, 48px)/1.19 var(--display-font, Georgia, serif);
    letter-spacing: -.035em;
    margin: 13px 0 22px;
}
.purpose-intro em,
.studies-section-heading em,
.studies-heading-center em { color: var(--studies-gold); font-style: normal; }
.purpose-intro p { font-size: 16px; line-height: 1.75; color: #4c5c55; }
.purpose-list { display: grid; gap: 11px; }
.purpose-list > div {
    display: grid;
    grid-template-columns: 50px 1fr;
    column-gap: 17px;
    padding: 17px 22px;
    border: 1px solid #eae6dc;
    border-radius: 13px;
    background: #faf9f5;
    transition: transform .2s ease, border-color .2s ease;
}
.purpose-list > div:hover { transform: translateX(4px); border-color: #d8bc83; }
.purpose-list span { grid-row: span 2; font: 600 25px var(--display-font, Georgia, serif); color: #c69a4e; align-self: center; }
.purpose-list strong { font-size: 15px; color: #173e32; }
.purpose-list small { font-size: 13px; color: #68736d; margin-top: 5px; }
.studies-grades { padding: 95px 0 85px; background: #f8f7f1; }
.studies-section-heading { display: flex; justify-content: space-between; align-items: center; gap: 40px; margin-bottom: 35px; }
.studies-section-heading h2 { max-width: 710px; margin-bottom: 10px; }
.studies-section-heading p { max-width: 660px; font-size: 16px; color: #52635a; line-height: 1.65; margin: 0; }
.heading-decoration { color: #e1d4b8; font-size: 125px; line-height: 1; }
.grades-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 17px; }
.grade-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 236px;
    padding: 22px;
    background: #fff;
    border: 1px solid #e9e3d7;
    border-radius: 15px;
    box-shadow: 0 8px 25px #213b2c08;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.grade-card:hover { transform: translateY(-5px); border-color: #c5a568; box-shadow: 0 16px 32px #213b2c17; }
.grade-number { font: 600 59px/1 var(--display-font, Georgia, serif); color: #eee6d6; }
.grade-card-body { margin-top: auto; }
.grade-label { color: #b78b45; font-size: 11px; font-weight: 700; letter-spacing: .14em; }
.grade-card h3 { font: 600 17px/1.4 var(--body-font, Arial, sans-serif); color: #153d31; margin: 8px 0 0; }
.grade-mark { position: absolute; right: 19px; top: 21px; font-size: 18px; color: #c49a4e; }
.grades-action { display: flex; align-items: center; justify-content: center; gap: 25px; margin-top: 38px; }
.grades-action p { color: #56645d; }
.studies-learning { padding: 95px 0 100px; background: white; }
.studies-heading-center { text-align: center; max-width: 780px; margin: 0 auto 44px; }
.studies-heading-center h2 { margin-bottom: 13px; }
.studies-heading-center p { font-size: 16px; line-height: 1.6; color: #57645e; }
.learning-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 22px; align-items: stretch; }
.learning-card {
    padding: 34px 38px;
    border-radius: 17px;
    background: #f9f8f3;
    border: 1px solid #e9e4d7;
}
.learning-card:nth-child(2), .learning-card:nth-child(3) { background: #f4f6f1; }
.learning-card-top { display: flex; justify-content: space-between; align-items: center; }
.learning-range { color: #b0843c; letter-spacing: .12em; font-size: 12px; font-weight: 700; text-transform: uppercase; }
.learning-ornament { color: #d3bb8c; font-size: 24px; }
.learning-card h3 { font: 600 27px var(--display-font, Georgia, serif); margin: 12px 0 21px; }
.learning-card ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 25px; }
.learning-card li { position: relative; break-inside: avoid; padding: 0 0 12px 19px; font-size: 13px; line-height: 1.55; color: #4d5c54; }
.learning-card li::before { content: "✓"; position: absolute; left: 0; color: #b58d4b; font-weight: 700; }
.studies-cta { background: linear-gradient(115deg, #073f34, #0f5546 62%, #0b4538); padding: 66px 0; color: white; }
.cta-inner { display: flex; justify-content: space-between; align-items: center; gap: 45px; }
.studies-cta .eyebrow { color: #e8bd73; }
.studies-cta h2 { max-width: 700px; margin: 13px 0; }
.studies-cta p { color: #d5e6dd; line-height: 1.65; max-width: 680px; }
.studies-cta .button-light { background: #fff; color: #0e4b3d; white-space: nowrap; }
.studies-faq { padding: 95px 0; }
.studies-faq .faq-inner { max-width: 940px; }
.studies-faq .faq-items { margin-top: 30px; }
.studies-faq h2 { font-size: clamp(34px, 3.2vw, 46px); }
@media (max-width: 1150px) {
    .studies-hero-inner { grid-template-columns: 56% 44%; }
    .studies-hero-copy { padding-left: 36px; }
    .grades-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .arch-outer { height: 410px; }
    .floating-seal { width: 78px; height: 78px; font-size: 28px; }
}
@media (max-width: 800px) {
    .studies-hero-inner { grid-template-columns: 1fr; }
    .studies-hero-copy { padding: 65px 30px 45px; }
    .studies-hero-visual { min-height: 460px; }
    .arch-outer { height: 405px; width: 300px; }
    .purpose-grid, .learning-grid { grid-template-columns: 1fr; }
    .purpose-grid { gap: 25px; }
    .cta-inner { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 600px) {
    .studies-container { width: calc(100% - 36px); }
    .studies-hero-copy { padding: 47px 20px 37px; }
    .studies-hero h1 { font-size: clamp(38px, 9.3vw, 52px); }
    .studies-hero-actions { flex-direction: column; align-items: stretch; }
    .studies-hero-notes { margin-top: 30px; gap: 12px 0; }
    .studies-hero-notes span { padding: 0 11px; font-size: 11px; }
    .studies-hero-notes b { font-size: 14px; }
    .studies-hero-visual { min-height: 395px; }
    .arch-outer { height: 355px; width: 255px; }
    .arch-arabic { font-size: 54px; }
    .arch-title { font-size: 27px; }
    .floating-seal { right: 4%; top: 26px; }
    .studies-purpose, .studies-learning, .studies-grades, .studies-faq { padding-top: 64px; padding-bottom: 64px; }
    .heading-decoration { display: none; }
    .grades-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 11px; }
    .grade-card { min-height: 207px; padding: 17px; }
    .grade-number { font-size: 47px; }
    .grade-card h3 { font-size: 14px; }
    .grades-action { flex-direction: column; gap: 8px; text-align: center; }
    .learning-card { padding: 27px 22px; }
    .learning-card ul { columns: 1; }
    .studies-cta { padding: 55px 0; }
}
@media (prefers-reduced-motion: reduce) {
    .grade-card, .purpose-list > div { transition: none; }
}