/* ============================================================
   teoria.php — გატანილი inline სტილები, ბლოკი 2/2 (დავალება 14)
   ⚠️ ფაილი **ცალკეა** განზრახ: გვერდი ორ ტოტადაა (`embed` და
      სრული ვერსია) და თითოეული ერთსა და იმავე კლასებს სხვანაირად
      აწყობს. შერწყმისას ერთი ტოტი მეორეს გადაფარავდა.
   ⚠️ `<link>` ზუსტად `<style>`-ის ადგილას დგას — კასკადი უცვლელია.
   ============================================================ */
/* ✅ სუფთა თეთრი ფონი + საჭე ვოტერმარკი */
.teoria-page{position:relative;min-height:100vh;background:#f8fafc;font-family:'Noto Sans Georgian',sans-serif;overflow:hidden}
[data-theme="dark"] .teoria-page{background:#0a0e1a}

/* ✅ საჭე ლოგო ვოტერმარკი — არეულად მიმოფანტული */
.teoria-page::before{
    content:'';
    position:fixed;
    inset:-60px;
    background:
        url('assets/images/logo.png') 6% 10% / 44px 44px no-repeat,
        url('assets/images/logo.png') 75% 6% / 30px 30px no-repeat,
        url('assets/images/logo.png') 35% 20% / 38px 38px no-repeat,
        url('assets/images/logo.png') 88% 25% / 24px 24px no-repeat,
        url('assets/images/logo.png') 18% 38% / 32px 32px no-repeat,
        url('assets/images/logo.png') 58% 35% / 48px 48px no-repeat,
        url('assets/images/logo.png') 93% 48% / 28px 28px no-repeat,
        url('assets/images/logo.png') 10% 58% / 40px 40px no-repeat,
        url('assets/images/logo.png') 45% 55% / 22px 22px no-repeat,
        url('assets/images/logo.png') 80% 62% / 36px 36px no-repeat,
        url('assets/images/logo.png') 28% 75% / 34px 34px no-repeat,
        url('assets/images/logo.png') 62% 78% / 26px 26px no-repeat,
        url('assets/images/logo.png') 90% 82% / 42px 42px no-repeat,
        url('assets/images/logo.png') 15% 90% / 30px 30px no-repeat,
        url('assets/images/logo.png') 52% 92% / 38px 38px no-repeat;
    opacity:0.045;
    pointer-events:none;
    z-index:0;
    transform:rotate(-6deg);
}
[data-theme="dark"] .teoria-page::before{opacity:0.06}

.teoria-content{position:relative;z-index:1;padding:100px 40px 60px;max-width:1300px;margin:0 auto}
.teoria-header{text-align:center;margin-bottom:40px}
.teoria-header h1{font-size:2.2rem;font-weight:700;margin-bottom:10px}
.teoria-header h1 span{background:linear-gradient(135deg,#10b981,#059669);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.teoria-header p{color:var(--text-muted,#64748b);font-size:1rem}
.teoria-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
@media(max-width:1100px){.teoria-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:800px){.teoria-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:500px){.teoria-grid{grid-template-columns:1fr}}
.teoria-card{background:#fff;border:1px solid rgba(0,0,0,0.06);border-radius:24px;overflow:hidden;text-decoration:none;color:inherit;transition:all .3s;box-shadow:0 4px 20px rgba(0,0,0,0.05)}
.teoria-card:hover{transform:translateY(-8px);box-shadow:0 25px 50px rgba(16,185,129,0.2);border-color:#10b981}
[data-theme="dark"] .teoria-card{background:rgba(255,255,255,0.05);box-shadow:none;border-color:rgba(255,255,255,0.08)}
.tc-photo{height:160px;overflow:hidden;position:relative}
.tc-photo img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.teoria-card:hover .tc-photo img{transform:scale(1.1)}
.tc-badge{position:absolute;top:14px;left:14px;padding:8px 16px;border-radius:12px;font-size:14px;font-weight:700;color:#fff;box-shadow:0 4px 15px rgba(0,0,0,0.2)}
.tc-body{padding:22px}
.tc-title{font-size:17px;font-weight:700;margin-bottom:8px}
[data-theme="dark"] .tc-title{color:#fff}
.tc-desc{font-size:14px;color:#64748b;line-height:1.5;margin-bottom:16px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
[data-theme="dark"] .tc-desc{color:rgba(255,255,255,0.5)}
.tc-btn{padding:14px;border-radius:14px;background:linear-gradient(135deg,#10b981,#059669);text-align:center;font-size:14px;font-weight:700;color:#fff;transition:all .2s}
.teoria-card:hover .tc-btn{box-shadow:0 6px 20px rgba(16,185,129,0.35)}