/* ============================================================
   THEORY HUB  /assets/css/pages/theory.css
   prefix: th-
   Accent: Teal/Green #3ecf8e
   ============================================================ */

:root {
    --th-green:      #3ecf8e;
    --th-green-dim:  rgba(62,207,142,0.14);
    --th-green-line: rgba(62,207,142,0.25);
    --th-bg:         #0c0c0e;
    --th-card:       #10100e;
    --th-card-hov:   #161612;
    --th-border:     rgba(255,255,255,0.07);
    --th-text:       #f0ece4;
    --th-text-sub:   rgba(240,236,228,0.55);
    --th-text-dim:   rgba(240,236,228,0.28);
    --th-pad:        clamp(80px,14vw,240px);
}

/* ============================================================
   HERO
   bg: /assets/img/pages/theory/hero-bg.jpg
   ============================================================ */
.th-hero {
    position: relative;
    width: 100%;
    height: 42vh;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #04080a;
}
.th-hero__bg {
    position: absolute;
    inset: 0;
    background-image: url('/assets/img/pages/theory/hero-bg.jpg');
    background-size: cover;
    background-position: 50% 40%;
    background-color: #061410;
    opacity: .40;
    filter: blur(1px);
    z-index: 1;
}
.th-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg,
        rgba(62,207,142,.16)  0%,
        rgba(4,8,10,.55)     55%,
        rgba(4,8,10,.92)    100%);
    z-index: 2;
}
.th-hero__text {
    position: relative;
    z-index: 3;
    text-align: center;
    padding: 0 20px;
}
.th-hero__eyebrow {
    display: block;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .55em;
    color: var(--th-green);
    text-transform: uppercase;
    margin-bottom: 14px;
    opacity: .8;
}
.th-hero__title {
    font-size: clamp(2.8rem,8vw,5.5rem);
    font-weight: 900;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: .12em;
    color: #fff;
    line-height: 1;
    text-transform: uppercase;
    margin: 0 0 16px;
    text-shadow: 0 0 40px rgba(62,207,142,.2);
}
.th-hero__sub {
    font-size: .95rem;
    color: rgba(255,255,255,.6);
    letter-spacing: .1em;
    margin: 0;
}

/* ============================================================
   DIVIDER
   ============================================================ */
.th-divider {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 0 40px;
    height: 52px;
    background: var(--th-bg);
    border-top:    1px solid var(--th-border);
    border-bottom: 1px solid var(--th-border);
    width: 100vw;
    margin-left:  calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    box-sizing: border-box;
}
.th-divider__line {
    flex: 1;
    height: 1px;
    background: var(--th-green-line);
    opacity: .4;
}
.th-divider__label {
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .5em;
    color: var(--th-green);
    text-transform: uppercase;
    white-space: nowrap;
}

/* ============================================================
   PRIMARY — TACTICS | GLOSSARY (6:4 アシンメトリー)
   ============================================================ */
.th-primary {
    display: grid;
    grid-template-columns: 3fr 2fr;
    width: 100vw;
    margin-left:  calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    background: var(--th-bg);
    border-bottom: 1px solid var(--th-border);
    padding-left:  var(--th-pad);
    padding-right: var(--th-pad);
    box-sizing: border-box;
    min-height: 380px;
    align-items: stretch;
}

.th-block {
    position: relative;
    display: flex;
    text-decoration: none;
    overflow: hidden;
}

.th-block--tactics {
    border-left:  1px solid var(--th-border);
    border-right: 1px solid var(--th-border);
}
.th-block--glossary {
    border-right: 1px solid var(--th-border);
}

.th-block__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-color: #0a1610;
    opacity: .14;
    z-index: 0;
    transition: opacity .5s, transform .6s;
}
.th-block--tactics  .th-block__bg { background-image: url('/assets/img/pages/theory/tactics-bg.jpg'); }
.th-block--glossary .th-block__bg { background-image: url('/assets/img/pages/theory/glossary-bg.jpg'); background-color: #080c14; }
.th-block:hover .th-block__bg { opacity: .26; transform: scale(1.03); }

.th-block__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(10,10,14,.5) 0%, rgba(10,10,14,.92) 100%);
    z-index: 1;
}

.th-block__body {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    padding: 40px 36px;
    width: 100%;
}

.th-block__meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.th-num {
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: .4em;
    color: var(--th-text-dim);
}
.th-tag {
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .35em;
    color: var(--th-green);
    border: 1px solid var(--th-green-line);
    background: var(--th-green-dim);
    padding: 3px 10px;
    text-transform: uppercase;
}

.th-block__title {
    font-size: clamp(1.5rem,2.5vw,2.1rem);
    font-weight: 900;
    color: var(--th-text);
    margin: 0 0 10px;
    line-height: 1.15;
    position: relative;
    padding-bottom: 12px;
}
.th-block__title::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 28px; height: 2px;
    background: var(--th-green);
    transition: width .4s cubic-bezier(.165,.84,.44,1);
}
.th-block:hover .th-block__title::after { width: 64px; }

.th-block__desc {
    font-size: .85rem;
    color: var(--th-text-sub);
    line-height: 1.8;
    margin: 0 0 18px;
    flex: 1;
}

.th-block__cta {
    display: inline-block;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .2em;
    color: var(--th-green);
    padding-bottom: 4px;
    border-bottom: 1px solid var(--th-green-line);
    margin-bottom: 20px;
    transition: color .25s, border-color .25s;
}
.th-block:hover .th-block__cta { color: #fff; border-color: rgba(255,255,255,.3); }

/* Topics list (tactics) */
.th-block__topics {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.th-block__topics li {
    font-size: .75rem;
    color: var(--th-text-dim);
    padding-left: 14px;
    position: relative;
    line-height: 1.5;
    transition: color .25s;
}
.th-block__topics li::before {
    content: '';
    position: absolute;
    left: 0; top: 7px;
    width: 5px; height: 1px;
    background: var(--th-green);
    opacity: .5;
}
.th-block:hover .th-block__topics li { color: var(--th-text-sub); }

/* Tag cloud (glossary) */
.th-tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}
.th-tag-cloud span {
    font-size: .68rem;
    font-weight: 600;
    color: var(--th-text-dim);
    border: 1px solid var(--th-border);
    padding: 4px 10px;
    letter-spacing: .05em;
    transition: color .25s, border-color .25s, background .25s;
}
.th-block:hover .th-tag-cloud span {
    color: var(--th-green);
    border-color: var(--th-green-line);
    background: var(--th-green-dim);
}

/* ============================================================
   KEY CONCEPTS — ストリップレイアウト
   ============================================================ */
.th-concepts {
    background: var(--th-bg);
    border-bottom: 1px solid var(--th-border);
    width: 100vw;
    margin-left:  calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    padding: 52px 0 56px;
    box-sizing: border-box;
}

.th-concepts__inner {
    padding: 0 var(--th-pad);
    box-sizing: border-box;
}

.th-concepts__lead {
    margin-bottom: 28px;
}
.th-concepts__en {
    display: block;
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .5em;
    color: var(--th-green);
    text-transform: uppercase;
    margin-bottom: 8px;
    opacity: .7;
}
.th-concepts__title {
    font-size: clamp(1.2rem,2vw,1.6rem);
    font-weight: 900;
    color: var(--th-text);
    margin: 0;
    line-height: 1.2;
}

/* ストリップ：縦1列 */
.th-concepts__strip {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--th-border);
    border: 1px solid var(--th-border);
}

.th-concept {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 18px 24px;
    background: var(--th-card);
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: background .25s;
}
.th-concept::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 0; height: 2px;
    background: var(--th-green);
    transition: width .35s;
}
.th-concept:hover { background: var(--th-card-hov); }
.th-concept:hover::after { width: 100%; }

.th-concept__num {
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .3em;
    color: var(--th-green);
    opacity: .5;
    flex-shrink: 0;
    width: 20px;
}
.th-concept:hover .th-concept__num { opacity: 1; }

.th-concept__body {
    flex: 1;
    display: flex;
    align-items: baseline;
    gap: 16px;
}

.th-concept__name {
    font-size: 1rem;
    font-weight: 800;
    color: var(--th-text);
    line-height: 1;
}

.th-concept__sub {
    font-size: .75rem;
    color: var(--th-text-dim);
    line-height: 1;
}
.th-concept:hover .th-concept__sub { color: var(--th-text-sub); }

.th-concept__arrow {
    font-size: .85rem;
    color: var(--th-text-dim);
    flex-shrink: 0;
    transition: color .25s, transform .25s;
}
.th-concept:hover .th-concept__arrow { color: var(--th-green); transform: translateX(4px); }

/* ============================================================
   NAVIGATE
   ============================================================ */
.th-nav-section {
    background: var(--th-bg);
    border-bottom: 1px solid var(--th-border);
    width: 100vw;
    margin-left:  calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    padding: 0 var(--th-pad);
    box-sizing: border-box;
}

.th-nav-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 1px;
    background: var(--th-border);
    border: 1px solid var(--th-border);
    border-top: none;
}

.th-navcard {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 26px 24px;
    background: var(--th-card);
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: background .3s;
}
.th-navcard::before {
    content: '';
    position: absolute;
    left: 0; top: 0;
    width: 3px; height: 0;
    background: var(--th-green);
    transition: height .35s;
}
.th-navcard:hover { background: var(--th-card-hov); }
.th-navcard:hover::before { height: 100%; }

.th-navcard__body { flex: 1; min-width: 0; }
.th-navcard__en {
    display: block;
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: .45em;
    color: var(--th-green);
    text-transform: uppercase;
    margin-bottom: 5px;
    opacity: .7;
}
.th-navcard__title {
    font-size: .95rem;
    font-weight: 800;
    color: var(--th-text);
    margin: 0 0 4px;
    line-height: 1.3;
}
.th-navcard__desc {
    font-size: .75rem;
    color: var(--th-text-sub);
    line-height: 1.6;
    margin: 0;
}
.th-navcard__arrow {
    font-size: 1rem;
    color: var(--th-text-dim);
    flex-shrink: 0;
    transition: color .25s, transform .25s;
}
.th-navcard:hover .th-navcard__arrow { color: var(--th-green); transform: translateX(4px); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
    .th-primary {
        grid-template-columns: 1fr;
        padding-left: 24px;
        padding-right: 24px;
    }
    .th-block--tactics { border-right: 1px solid var(--th-border); border-bottom: 1px solid var(--th-border); }
    .th-nav-grid { grid-template-columns: 1fr; }
    .th-concepts { padding: 36px 0 40px; }
    .th-concepts__inner { padding-left: 24px; padding-right: 24px; }
    .th-nav-section { padding-left: 24px; padding-right: 24px; }
    .th-divider { padding: 0 20px; }
}

@media (max-width: 768px) {
    .th-hero { height: 36vh; min-height: 260px; }
    .th-block__body { padding: 28px 20px; }
    .th-concept__body { flex-direction: column; gap: 4px; }
}