/* Teacher Tips blog: index (tabs, featured carousel, glow cards) and single post (banner + overlapping article card). */

/* ---------- glow card (shared by index and "keep reading") ---------- */
.tc{position:relative;display:block;border-radius:26px;padding:7px;text-decoration:none;color:#fff;isolation:isolate;overflow:hidden;
  background:rgba(255,255,255,.14);box-shadow:0 0 0 1.5px rgba(255,255,255,.22) inset,0 18px 40px -18px rgba(9,23,43,.55);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.tc-bg{position:absolute;inset:-30px;z-index:-2;background:var(--navy) center/cover no-repeat;filter:blur(26px) saturate(1.5) brightness(.55);transform:scale(1.1)}
.tc::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(9,23,43,0) 30%,rgba(9,23,43,.55) 100%)}
.tc-frame{display:flex;flex-direction:column;height:100%;border-radius:20px;overflow:hidden;box-shadow:0 0 0 1.5px rgba(255,255,255,.18) inset;background:rgba(9,23,43,.28)}
.tc-img{display:block;width:100%;aspect-ratio:16/10;height:auto;object-fit:cover;-webkit-mask-image:linear-gradient(180deg,#000 72%,transparent);mask-image:linear-gradient(180deg,#000 72%,transparent);transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.tc-body{display:flex;flex-direction:column;gap:8px;padding:6px 22px 22px;flex:1}
.tc-cat{align-self:flex-start;font:700 11px/1 var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:var(--yellow)}
.tc h3{font:600 22px/1.15 var(--f-head);font-style:normal;letter-spacing:-.02em;color:#fff;margin:0;text-wrap:balance}
.tc-date{font:300 14px/1.2 var(--f-body);color:rgba(255,255,255,.72)}
.tc p{margin:2px 0 0;font:400 15px/1.45 var(--f-body);color:rgba(255,255,255,.86);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.tc-more{margin-top:auto;padding-top:10px;font:600 15px/1 var(--f-body);color:#fff;display:inline-flex;gap:6px;align-items:center}
.tc-more::after{content:"\2192";transition:transform .25s}
@media (hover:hover){.tc:hover{transform:translateY(-6px);box-shadow:0 0 0 1.5px rgba(255,255,255,.35) inset,0 28px 60px -20px rgba(9,23,43,.7)}
  .tc:hover .tc-img{transform:scale(1.04)}.tc:hover .tc-more::after{transform:translateX(4px)}}
.tc:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}

/* ---------- blog index ---------- */
.bi{padding:34px 0 90px}
.bi-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:18px}
.bi-head h1{font-size:clamp(30px,4vw,44px)}
.bi-head p{margin:6px 0 0;color:var(--muted);max-width:560px}
.bi-tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:4px 2px 12px;margin-bottom:6px;-webkit-overflow-scrolling:touch}
.bi-tabs::-webkit-scrollbar{display:none}
.bi-tab{flex:none;border:0;background:transparent;color:var(--ink);font:500 15px/1 var(--f-body);padding:10px 14px;border-radius:8px;cursor:pointer;white-space:nowrap;transition:background .2s,color .2s}
.bi-tab:hover{background:var(--surface-2)}
.bi-tab[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.bi-tab:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

.bi-hero{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:21/9;min-height:340px;background:var(--navy);isolation:isolate}
.bi-slide{position:absolute;inset:0;display:block;color:#fff;text-decoration:none;opacity:0;visibility:hidden;transition:opacity .7s ease,visibility 0s .7s}
.bi-slide.on{opacity:1;visibility:visible;transition:opacity .7s ease}
.bi-slide-bg{position:absolute;inset:-40px;background:center/cover no-repeat;filter:blur(30px) saturate(1.4) brightness(.5);transform:scale(1.1)}
.bi-slide-img{position:absolute;right:5%;top:50%;width:46%;aspect-ratio:16/10;height:auto;object-fit:cover;border-radius:14px;transform:translateY(-50%) rotate(2deg);box-shadow:0 30px 60px -20px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.15);transition:transform 6s ease}
.bi-slide.on .bi-slide-img{transform:translateY(-50%) rotate(0deg) scale(1.03)}
.bi-slide::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(9,23,43,.85) 0%,rgba(9,23,43,.45) 45%,rgba(9,23,43,0) 70%),linear-gradient(0deg,rgba(9,23,43,.6),transparent 45%)}
.bi-slide-txt{position:absolute;z-index:1;left:5%;bottom:68px;max-width:41%}
.bi-slide-txt span{font:700 11.5px/1 var(--f-body);letter-spacing:.18em;text-transform:uppercase;color:var(--yellow)}
.bi-slide-txt h2{font:600 clamp(24px,3vw,38px)/1.12 var(--f-head);font-style:normal;margin:10px 0 10px;color:#fff;text-wrap:balance}
.bi-slide-txt p{margin:0;font-size:15.5px;line-height:1.45;color:rgba(255,255,255,.88);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.bi-dots{position:absolute;z-index:2;left:50%;bottom:20px;transform:translateX(-50%);display:flex;gap:7px;padding:7px 10px;border-radius:99px;background:rgba(255,255,255,.22);backdrop-filter:blur(8px)}
.bi-dot{width:10px;height:10px;border-radius:99px;border:0;padding:0;background:rgba(255,255,255,.65);cursor:pointer;transition:width .3s,background .3s}
.bi-dot[aria-current="true"]{width:26px;background:#fff}
.bi-dot:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}

.bi-sub{font:600 22px/1.2 var(--f-head);font-style:normal;margin:44px 0 18px}
.bi-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
.bi-grid .tc[hidden]{display:none}
.bi-more{display:flex;justify-content:center;margin-top:34px}
.bi-more button{border:0;background:var(--ink);color:var(--bg);font:600 15px/1 var(--f-body);padding:13px 22px;border-radius:6px;cursor:pointer}
.bi-more button:hover{opacity:.88}
.bi-empty{color:var(--muted);text-align:center;padding:30px 0}
@media (max-width:980px){.bi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){
  .bi-hero{aspect-ratio:auto;min-height:0;height:470px}
  .bi-slide-img{left:16px;right:16px;top:16px;width:calc(100% - 32px);transform:none!important}
  .bi-slide::after{background:linear-gradient(0deg,rgba(9,23,43,.95) 0%,rgba(9,23,43,.7) 42%,rgba(9,23,43,0) 62%)}
  .bi-slide-txt{left:20px;right:20px;max-width:none;bottom:56px}
  .bi-slide-txt h2{font-size:23px}
  .bi-slide-txt p{-webkit-line-clamp:2;font-size:14.5px}
  .bi-grid{grid-template-columns:1fr;gap:20px}
}

/* ---------- single post ---------- */
.bp{padding:28px 0 0}
.bp-banner{position:relative;max-width:1160px;margin:0 auto;height:420px;border-radius:22px;overflow:hidden;isolation:isolate;background:var(--navy);box-shadow:0 0 0 1px rgba(9,23,43,.12)}
.bp-banner-bg{position:absolute;inset:-40px;z-index:-1;background:center/cover no-repeat;filter:blur(28px) saturate(1.45) brightness(.62);transform:scale(1.1)}
.bp-fan{position:absolute;left:50%;top:34px;width:min(470px,44%);transform:translateX(-50%)}
.bp-fan img{display:block;width:100%;aspect-ratio:16/10;height:auto;object-fit:cover;border-radius:12px;box-shadow:0 26px 50px -18px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.18)}
.bp-fan .c0{position:relative;z-index:2}
.bp-fan .c1,.bp-fan .c2{position:absolute;top:22px;width:82%;z-index:1;opacity:.92}
.bp-fan .c1{right:62%;transform:rotate(-7deg)}
.bp-fan .c2{left:62%;transform:rotate(7deg)}
.bp-card{position:relative;z-index:1;max-width:760px;margin:-190px auto 0;background:var(--surface);border-radius:18px 18px 0 0;padding:34px 52px 20px;box-shadow:0 -12px 40px -24px rgba(9,23,43,.35)}
.bp-back{display:inline-flex;align-items:center;gap:6px;font:500 13.5px/1 var(--f-body);color:var(--muted);text-decoration:none}
.bp-back:hover{color:var(--ink)}
.bp-card h1{font:700 clamp(28px,3.1vw,38px)/1.14 var(--f-head);font-style:normal;letter-spacing:-.025em;margin:16px 0 14px;text-wrap:balance}
.bp-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0;font-size:15px;color:var(--muted)}
.bp-meta img{width:30px;height:30px;border-radius:50%;object-fit:cover;border:2px solid var(--yellow)}
.bp-meta .by{color:var(--ink);font-weight:600}
.bp-cat{color:#9C4DDB;text-decoration:none;font-weight:500}
:root[data-theme="dark"] .bp-cat{color:#C79BF5}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .bp-cat{color:#C79BF5}}
.bp-cat:hover{text-decoration:underline}
.bp-lede{font-size:19px;line-height:1.55;color:var(--ink);opacity:.86;margin:22px 0 0}
.bp-card hr{border:0;border-top:1.5px solid var(--line);margin:30px 0 26px}
.bp-card .legal{font-size:16.5px;max-width:none}
.bp-card .legal h2{font:700 25px/1.2 var(--f-head);font-style:normal;margin:36px 0 10px}
.bp-card .legal h3{font:700 19px/1.25 var(--f-head);font-style:normal;margin:26px 0 8px}
.bp-after{max-width:1160px;margin:0 auto;padding:30px 20px 90px}
.bp-after .post-prods,.bp-after .post-cta{margin-top:40px}
.bp-keep{max-width:1100px;margin:60px auto 0}
.bp-keep h2{font:600 24px/1.2 var(--f-head);font-style:normal;margin-bottom:18px}
.bp-keep .bi-grid{gap:22px}
@media (max-width:760px){
  .bp{padding:16px 16px 0}
  .bp-banner{height:auto;background:none;box-shadow:none;border-radius:16px;overflow:visible}
  .bp-banner-bg,.bp-fan .c1,.bp-fan .c2{display:none}
  .bp-fan{position:static;width:100%;transform:none}
  .bp-fan img{border-radius:16px;box-shadow:0 14px 30px -16px rgba(9,23,43,.5)}
  .bp-card{margin:0;padding:24px 4px 6px;background:none;box-shadow:none;border-radius:0}
  .bp-back,.m-cat{display:none}
  .bp-card h1{text-align:center;font-size:27px;margin:0 0 14px}
  .bp-meta{justify-content:center;font-size:14px}
  .bp-lede{font-size:17px}
  .bp-card hr{margin:22px 0 18px}
  .bp-after{padding:20px 16px 70px}
}
@media (prefers-reduced-motion:reduce){.tc,.tc-img,.bi-slide,.bi-slide-img{transition:none!important}}

/* ---------- liquid glass frame around the featured tile ----------
   Tray: a raised frosted track. Bezel: a thick metal rim, dark on top, bright silver underneath,
   with a prism streak along the bottom edge where the light refracts. */
.bi-glass{--tray:linear-gradient(180deg,#E9EDF3,#DCE2EA);--tray-hi:rgba(255,255,255,.95);--tray-lo:rgba(9,23,43,.16);--tray-edge:rgba(9,23,43,.10);
  position:relative;padding:16px;border-radius:40px;background:var(--tray);
  box-shadow:0 0 0 1px var(--tray-edge),inset 0 2px 1px var(--tray-hi),inset 0 -2px 3px var(--tray-lo),inset 0 10px 22px -12px var(--tray-lo),0 2px 4px rgba(9,23,43,.06),0 30px 50px -30px rgba(9,23,43,.4)}
:root[data-theme="dark"] .bi-glass{--tray:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.04));--tray-hi:rgba(255,255,255,.22);--tray-lo:rgba(0,0,0,.5);--tray-edge:rgba(255,255,255,.12)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .bi-glass{--tray:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.04));--tray-hi:rgba(255,255,255,.22);--tray-lo:rgba(0,0,0,.5);--tray-edge:rgba(255,255,255,.12)}}
.bi-glass .bi-hero{border-radius:26px;box-shadow:0 16px 26px -12px rgba(9,23,43,.55),0 3px 6px rgba(9,23,43,.18)}
.bi-rim,.bi-bevel{position:absolute;inset:0;z-index:3;border-radius:inherit;pointer-events:none}
.bi-rim{padding:9px;
  background:
    radial-gradient(14px 46px at 99.4% 34%,rgba(255,196,70,.95),rgba(255,196,70,0) 70%),
    linear-gradient(90deg,rgba(14,16,30,.55),rgba(14,16,30,0) 9%,rgba(14,16,30,0) 91%,rgba(14,16,30,.6)),
    linear-gradient(180deg,#B9BFCC 0%,#6E748A 4%,#454A61 10%,#2C3046 24%,#262A3F 50%,#33384F 66%,#858BA0 80%,#D8DDE6 90%,#FAFBFD 96%,#BCC2CE 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
@property --prism-a{syntax:'<angle>';inherits:false;initial-value:0deg}
.bi-rim::after{content:"";position:absolute;inset:0;
  background:conic-gradient(from var(--prism-a),transparent 0deg,transparent 292deg,rgba(255,255,255,.0) 296deg,#FFFFFF 302deg,#FFD24A 308deg,#FF7A1A 313deg,#E8173A 318deg,#8C1238 323deg,#2F7BFF 330deg,#3FE0FF 336deg,#FFFFFF 342deg,#FFE15A 347deg,#FF4D2E 352deg,rgba(255,255,255,.7) 357deg,transparent 360deg);
  mix-blend-mode:hard-light;animation:prism 4.5s linear infinite}
@keyframes prism{to{--prism-a:360deg}}
.bi-bevel{box-shadow:inset 0 0 0 1px rgba(255,255,255,.35),inset 0 1.5px 0 rgba(255,255,255,.55)}
.bi-bevel::after{content:"";position:absolute;inset:9px;border-radius:18px;box-shadow:0 0 0 1px rgba(255,255,255,.4),0 -1px 0 1px rgba(10,12,24,.55),inset 0 2px 1px rgba(255,255,255,.12),inset 0 0 14px rgba(0,0,0,.25)}
@media (prefers-reduced-motion:reduce){.bi-rim::after{animation:none}}
@media (max-width:760px){.bi-glass{padding:9px;border-radius:28px}.bi-glass .bi-hero{border-radius:20px}.bi-rim{padding:6px}.bi-bevel::after{inset:6px;border-radius:14px}}

/* author box on posts, blog row on collection pages */
.bp-author{max-width:820px;margin:44px auto 0;display:flex;gap:18px;align-items:flex-start;padding:22px;border-radius:18px;background:var(--surface);border:1.5px solid var(--line)}
.bp-author img{width:72px;height:72px;border-radius:50%;object-fit:cover;border:3px solid var(--yellow);flex:none}
.bp-author b{font:700 17px/1.2 var(--f-head)}.bp-author p{margin:6px 0 8px;color:var(--muted);font-size:15px;line-height:1.55}
.bp-author a{font-weight:700;color:var(--accent-text);text-decoration:none}.bp-author a:hover{text-decoration:underline}
.bp-meta a.by{color:var(--ink);font-weight:600;text-decoration:none}.bp-meta a.by:hover{text-decoration:underline}
.col-blog{margin-top:56px}.col-blog .bi-sub{margin-top:0}
@media (max-width:560px){.bp-author{flex-direction:column;align-items:center;text-align:center}}