.detail-page{margin-top:1rem;padding-top:1rem;padding-bottom:3rem;background:linear-gradient(180deg,#faf7f2,#fff);min-height:100vh}.container{max-width:1200px;margin:0 auto;padding:0 2rem}.back-link{display:inline-flex;align-items:center;gap:.5rem;color:var(--accent-primary);text-decoration:none;margin-bottom:2rem;font-weight:500;transition:all .3s;padding:.5rem 1rem;border-radius:6px;background:#5a9fb014}.back-link:hover{gap:.75rem;background:#5a9fb026;transform:translate(-4px)}.detail-hero-section{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:stretch;margin-bottom:4rem;min-height:500px;background:linear-gradient(135deg,#7ab5d414,#f4d03f0d);border-radius:20px;overflow:hidden;box-shadow:0 10px 40px #2d3e421a}.hero-content{padding:3rem;display:flex;flex-direction:column;justify-content:center;position:relative}.hero-content:before{content:"";position:absolute;left:0;top:20%;bottom:20%;width:4px;background:linear-gradient(180deg,transparent 0%,var(--accent-primary) 20%,var(--accent-primary) 80%,transparent 100%);border-radius:2px}.detail-header{margin:0;padding:0;background:none;border:none;position:relative}.detail-header h1{font-size:2.75rem;color:var(--accent-primary);margin-bottom:1.5rem;line-height:1.15;font-weight:700;letter-spacing:-.02em}.lead{font-size:1.3rem;color:var(--text-secondary);line-height:1.6;font-weight:400;margin:0}.hero-image{position:relative;overflow:hidden;min-height:500px;transition:all .5s cubic-bezier(.4,0,.2,1)}.hero-image:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(122,181,212,.15) 0%,rgba(244,208,63,.1) 50%,transparent 100%);z-index:1;transition:opacity .5s;pointer-events:none}.detail-hero-section:hover .hero-image:before{opacity:.5}.hero-image img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.4,0,.2,1)}.detail-hero-section:hover .hero-image img{transform:scale(1.05)}.detail-image{margin:2rem auto 3rem;max-width:700px;border-radius:16px;overflow:hidden;box-shadow:0 8px 30px #2d3e421f;position:relative;transition:transform .3s,box-shadow .3s;border:8px solid #ffffff;background:linear-gradient(135deg,#7ab5d426,#f4d03f1a)}.detail-image:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 12px 40px #2d3e422e}.detail-image img{width:100%;height:350px;object-fit:cover;display:block}.detail-content{line-height:1.8;color:var(--text-primary)}.detail-content section{margin-bottom:3.5rem;padding:2rem;border-radius:12px;transition:box-shadow .3s}.detail-content section:hover{box-shadow:0 4px 20px #2d3e4214}.detail-content h2{font-size:1.875rem;color:var(--accent-primary);margin-bottom:1.5rem;margin-top:0;padding-bottom:.75rem;border-bottom:3px solid var(--aquatic-yellow);position:relative}.detail-content h2:before{content:"";position:absolute;left:0;bottom:-3px;width:60px;height:3px;background:var(--accent-primary)}.detail-content h3{font-size:1.375rem;color:var(--aquatic-blue-dark);margin-bottom:1rem;margin-top:1.5rem;padding-left:1rem;border-left:3px solid var(--aquatic-yellow)}.detail-content p{margin-bottom:1.25rem;font-size:1.05rem}.detail-content ul{margin:1.5rem 0;padding-left:0;list-style:none}.detail-content li{margin-bottom:1rem;line-height:1.7;padding-left:1.75rem;position:relative;font-size:1.05rem}.detail-content li:before{content:"";position:absolute;left:.2rem;top:.62rem;width:.65rem;height:.65rem;background:linear-gradient(135deg,var(--aquatic-blue-light) 0%,var(--accent-primary) 100%);border-radius:50%;box-shadow:0 0 0 4px #5a9fb01f}.detail-content strong{color:var(--aquatic-blue-dark);font-weight:600;padding:.1rem .3rem;background:#7ab5d41f;border-radius:3px}.research-card{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.75rem;align-items:start;padding:2rem;background:linear-gradient(135deg,#5a9fb01a,#f4d03f1a);border:1px solid rgba(90,159,176,.25);border-radius:14px}.research-icon{width:64px;height:64px;display:flex;align-items:center;justify-content:center;color:var(--accent-primary);background:#fff;border-radius:50%;box-shadow:0 4px 14px #2d3e421f}.detail-content .research-source{margin:0 0 .35rem;color:var(--accent-primary);font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.detail-content .research-card h3{margin:0 0 .75rem;padding:0;border:0;color:var(--text-primary);font-size:1.35rem;line-height:1.35}.detail-content .research-card p:not(.research-source){margin-bottom:1.25rem}.research-link{display:inline-flex;align-items:center;gap:.5rem;color:var(--accent-primary);font-weight:600;line-height:1.4;text-decoration:none}.research-link:hover{color:var(--aquatic-blue-dark);text-decoration:underline}.research-link svg{flex-shrink:0}.highlight-box{background:linear-gradient(135deg,#f4d03f26,#e878421a);border-left:4px solid var(--aquatic-gold);padding:1.5rem;border-radius:8px;margin:2rem 0}.cta-section{background:linear-gradient(135deg,#7db5c4,#5a9fb0);padding:3rem;border-radius:16px;text-align:center;margin-top:3rem;box-shadow:0 8px 30px #5a9fb040;position:relative;overflow:hidden}.cta-section:before{content:"";position:absolute;top:-50%;right:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(255,255,255,.1) 0%,transparent 70%);pointer-events:none}.cta-section h2{margin-top:0;color:#fff;font-size:2rem;margin-bottom:1rem;border:none}.cta-section h2:before{display:none}.cta-section p{color:#fffffff2;font-size:1.15rem;max-width:600px;margin:0 auto 2rem}.cta-section .btn-primary{display:inline-block;padding:1.25rem 3rem;border-radius:50px;text-decoration:none;font-weight:600;font-size:1.1rem;transition:all .3s;background:#fff;color:var(--accent-primary);box-shadow:0 4px 15px #0003;position:relative;z-index:1}.cta-section .btn-primary:hover{transform:translateY(-3px);box-shadow:0 8px 25px #0000004d;background:#f4d03f;color:var(--aquatic-teal)}@media(max-width:768px){.detail-page{margin-top:4rem;padding-top:3rem;padding-bottom:3rem}.container{padding:0 2rem}.detail-hero-section{grid-template-columns:1fr;gap:0;min-height:auto;margin-bottom:2.5rem}.hero-content{padding:2rem 1.5rem;order:2}.hero-content:before{display:none}.hero-image{min-height:300px;order:1}.detail-header{padding:0}.detail-header h1{font-size:1.875rem}.lead{font-size:1.0625rem}.detail-content section{padding:1.5rem}.detail-content h2{font-size:1.5rem}.detail-content h3{font-size:1.25rem}.detail-content p,.detail-content li{font-size:1rem}.research-card{grid-template-columns:1fr;gap:1.25rem;padding:1.5rem}.research-icon{width:56px;height:56px}.cta-section{padding:2rem}.cta-section h2{font-size:1.5rem}.cta-section p{font-size:1rem}.cta-section .btn-primary{width:100%;padding:1rem 2rem}}:global(html.dark-mode) .detail-page{background:linear-gradient(180deg,#1a1a1a,#0f0f0f)}:global(html.dark-mode) .detail-hero-section{background:linear-gradient(135deg,#7ab5d41f,#f4d03f14);box-shadow:0 10px 40px #00000080}:global(html.dark-mode) .hero-content:before{background:linear-gradient(180deg,transparent 0%,#7db5c4 20%,#7db5c4 80%,transparent 100%)}:global(html.dark-mode) .hero-image:before{background:linear-gradient(135deg,rgba(122,181,212,.2) 0%,rgba(244,208,63,.15) 50%,transparent 100%)}:global(html.dark-mode) .detail-header{background:none;border:none}:global(html.dark-mode) .detail-header h1{color:#7db5c4}:global(html.dark-mode) .lead{color:#e0e0e0}:global(html.dark-mode) .back-link{background:#7ab5d41f;color:#7db5c4}:global(html.dark-mode) .back-link:hover{background:#7ab5d433}:global(html.dark-mode) .detail-content section{background:var(--bg-secondary);box-shadow:0 2px 12px #0006}:global(html.dark-mode) .detail-content section:hover{box-shadow:0 4px 20px #00000080}:global(html.dark-mode) .detail-content h2{color:#7db5c4;border-bottom-color:#f5c885}:global(html.dark-mode) .detail-content h2:before{background:#7db5c4}:global(html.dark-mode) .detail-content h3{color:#a8d5e0;border-left-color:#f5c885}:global(html.dark-mode) .detail-content p,:global(html.dark-mode) .detail-content li{color:var(--text-primary)}:global(html.dark-mode) .detail-content strong{color:#a8d5e0;background:#7ab5d426}:global(html.dark-mode) .detail-content li:before{background:linear-gradient(135deg,#7db5c4,#5a9fb0)}:global(html.dark-mode) .research-card{background:linear-gradient(135deg,#5a9fb024,#f4d03f14);border-color:#7ab5d44d}:global(html.dark-mode) .research-icon{color:#7db5c4;background:var(--bg-tertiary);box-shadow:0 4px 14px #0000004d}:global(html.dark-mode) .research-link{color:#7db5c4}:global(html.dark-mode) .cta-section{background:linear-gradient(135deg,#3d7c8d,#1f5b6b)}
