/* ═══════════════════════════════════════════════════
   MAIN_PAGE.CSS — главная страница (доска + разделы)
═══════════════════════════════════════════════════ */

/* меловой шрифт — рукописный Marck Script */
:root{ --chalk: 'Marck Script', cursive; }

/* ════ СЕТКА БЛОКОВ ════ */
.layout{
    max-width:1180px;margin:0 auto;padding:48px 48px 72px;
    display:grid;grid-template-columns:1fr 1fr;gap:24px;
}
.block-1{grid-column:1 / -1;}   /* доска — на всю ширину */

/* ════ РАМА + ДОСКА ════ */
.frame{
    position:relative;width:100%;padding:24px;border-radius:10px;z-index:2;
    background:linear-gradient(135deg,#e7c08a 0%,#d3a766 38%,#c2954f 70%,#b07f3c 100%);
    box-shadow:0 2px 0 rgba(255,255,255,.4) inset,0 -4px 6px rgba(0,0,0,.3) inset,0 14px 30px rgba(0,0,0,.3);
}
.frame::before{content:'';position:absolute;inset:0;border-radius:10px;pointer-events:none;
    background:repeating-linear-gradient(118deg,rgba(120,80,30,.10) 0 3px,transparent 3px 9px);opacity:.5;}
.frame::after{content:'';position:absolute;inset:20px;border-radius:4px;pointer-events:none;
    box-shadow:0 0 0 2px rgba(40,28,12,.6),0 6px 14px rgba(0,0,0,.45) inset;}
.board-wrap{position:relative;border-radius:4px;overflow:hidden;}
.board{display:block;width:100%;aspect-ratio:16/9;}

/* ════ ПОЛОЧКА С МЕЛКАМИ ════ */
.tray{
    position:relative;z-index:1;width:94%;height:30px;margin:-8px auto 0;
    border-radius:0 0 9px 9px;
    background:linear-gradient(180deg,#d3a766 0%,#b07f3c 55%,#8a6030 100%);
    box-shadow:0 12px 22px rgba(0,0,0,.32);
}
.tray::before{content:'';position:absolute;left:0;right:0;top:0;height:9px;
    background:linear-gradient(180deg,#ecc488,#cea05a);
    border-radius:4px 4px 0 0;box-shadow:0 1px 0 rgba(255,255,255,.45) inset;}
.chalk{position:absolute;top:2px;height:8px;border-radius:5px;box-shadow:0 4px 5px rgba(0,0,0,.3);}
.c1{left:46px;width:64px;background:linear-gradient(180deg,#fff,#e4e4da);transform:rotate(-2deg);}
.c2{left:92px;width:48px;background:linear-gradient(180deg,#f6e7ad,#e3cf86);transform:rotate(1.5deg);}

/* ════ МЕЛОВОЙ ТЕКСТ ════ */
.q-line{ fill:#f1efe2; font-family:var(--chalk); font-weight:400; font-style:normal; /* filter:url(#chalk); */ }
.q-sign{ fill:#f1efe2; font-family:var(--chalk); font-weight:400; font-style:normal; /* filter:url(#chalk); */}
.doodle{ fill:#dfeede; opacity:.3; font-weight:400; font-style:normal; filter:url(#chalk);
         font-family:var(--chalk),'Times New Roman',serif; }

/* ════ КАРТОЧКИ РАЗДЕЛОВ (блоки 2 и 3) ════ */
.cat-block{
    background:var(--white);border:1.5px solid var(--border);border-radius:var(--r-lg);
    padding:22px 24px;box-shadow:var(--shadow-sm);
    display:flex;flex-direction:column;
    transition:transform .25s, box-shadow .25s, border-color .25s;
}
.cat-block:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--gold-bd);}
.cat-block-head{
    display:flex;align-items:center;gap:12px;text-decoration:none;
    margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid var(--border);
}
.cat-block-icon{
    width:44px;height:44px;flex-shrink:0;border-radius:12px;background:var(--gold-bg);
    display:flex;align-items:center;justify-content:center;font-size:22px;
}
.cat-block-head h3{
    font-family:var(--font-display);font-size:21px;font-weight:700;
    color:var(--ink);margin:0;line-height:1.2;
}
.cat-block-list{display:flex;flex-direction:column;gap:2px;}
.cat-block-item{
    display:flex;align-items:center;gap:8px;padding:9px 6px;border-radius:var(--r-sm);
    font-family:var(--font-ui);font-size:15px;font-weight:700;color:var(--ink2);
    text-decoration:none;transition:color .15s, background .15s, padding-left .15s;
}
.cat-block-item::before{content:'→';color:var(--gold);opacity:.6;font-size:13px;}
.cat-block-item:hover{color:var(--gold);background:var(--paper);padding-left:12px;}

/* ════ АДАПТИВ ════ */
@media (max-width:768px){
    .layout{padding:32px 20px 56px;grid-template-columns:1fr;}
    .frame{padding:14px;}
    .frame::after{inset:12px;}
}

/* ════ КАЛЬКУЛЯТОРЫ (блоки 4 и 5) ════ */
.calc-block{
    display:flex;flex-direction:column;
    background:var(--white);border:1.5px solid var(--border);
    border-top:3px solid var(--teal);border-radius:var(--r-lg);
    padding:22px 24px 24px;box-shadow:var(--shadow-sm);
    text-decoration:none;transition:transform .25s, box-shadow .25s;
}
.calc-block:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);}
.calc-label{
    font-family:var(--font-ui);font-size:11px;font-weight:900;
    letter-spacing:2px;text-transform:uppercase;color:var(--teal);margin-bottom:6px;
}
.calc-title{
    font-family:var(--font-display);font-size:21px;font-weight:700;
    color:var(--ink);margin:0 0 14px;
}
.calc-preview{
    background:var(--teal-bg);border-radius:var(--r-md);
    padding:16px;margin-bottom:16px;min-height:70px;
    display:flex;align-items:center;justify-content:center;gap:12px;color:var(--teal);
}
.calc-eq{font-family:var(--font-display);font-size:28px;font-weight:700;letter-spacing:.5px;}
.calc-op{font-family:var(--font-display);font-size:26px;font-weight:700;}
.fr{display:inline-flex;flex-direction:column;text-align:center;line-height:1;
    font-family:var(--font-display);font-size:24px;font-weight:700;}
.fr-n{padding:0 6px 2px;}
.fr-d{padding:2px 6px 0;border-top:2px solid currentColor;}
.calc-desc{
    font-family:var(--font-body);font-size:15px;line-height:1.55;
    color:var(--ink3);margin:0 0 18px;
}
.calc-btn{
    align-self:flex-start;margin-top:auto;
    display:inline-flex;align-items:center;gap:8px;
    background:var(--teal);color:#fff;font-family:var(--font-ui);
    font-size:14px;font-weight:800;padding:10px 20px;border-radius:var(--r-pill);
    transition:background .2s;
}
.calc-block:hover .calc-btn{background:#157d77;}


.cat-block-more{
    display:inline-flex;align-items:center;gap:6px;
    margin-top:8px;padding:9px 6px;
    font-family:var(--font-ui);font-size:14px;font-weight:800;
    color:var(--gold);text-decoration:none;transition:color .15s;
}
.cat-block-more:hover{color:var(--gold2);}