/* /tori (en, uk, ka): built from home page sections (site.css), loaded after site.css in place of subpage.css.
   Hero = home .hero with Tori in place of the phone; abilities = home .fcard tiles (2 x 2 grid, sticky stacking cards
   on phones); chat, planning, FAQ and footer use the home rules as they are. Phone layout below 780px. */

/* ===== hero ===== */
/* "Meet Tori, your cosplay planning partner": the whole line is the H1, typed like the home hero, one size down
   from the home hero so it fits in two lines on desktop */
.tori-hero .hero-title{min-height:0;width:min(960px,100%);font-size:80px;line-height:1.05;text-wrap:balance}
html.lang-ka .tori-hero .hero-title{font-size:56px}
.tori-hero .hero-sub{width:min(540px,100%)}
/* the copy column never grows past the screen (a fixed-width title would stretch it and run off both edges) */
.tori-hero .hero-copy{width:100%;max-width:960px}
.tori-hero .hero-stage-box{height:calc(480px * var(--hs));margin-top:48px}
.tori-stage{height:480px}
.tori-stage .layer-tori{left:540px;top:60px;width:360px;height:360px;overflow:visible;z-index:2;display:flex;align-items:center;justify-content:center}
.tori-hero-mascot{width:360px;height:360px}
.tori-halo{position:absolute;left:420px;top:-60px;width:600px;height:600px;border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(closest-side,rgba(139,84,255,.36),rgba(139,84,255,.12) 55%,transparent),
    radial-gradient(closest-side at 72% 72%,rgba(254,144,54,.16),transparent)}
.tori-hero .pill-in .ico{width:20px;height:20px}
/* one colour per ability, shared by the hero tags and the ability tiles (the app's category colours) */
[data-ability="1"]{--c:#8A54FF;--glow:rgba(138,84,255,.30)}
[data-ability="2"]{--c:#fe9036;--glow:rgba(254,144,54,.24)}
[data-ability="3"]{--c:#56b0ff;--glow:rgba(86,176,255,.24)}
[data-ability="4"]{--c:#99e689;--glow:rgba(153,230,137,.20)}
.tori-hero .pill-in .ico{color:var(--c,#fff)}

/* ===== tinted icon chip (the app's CategoryIcon, as on the tools pages) ===== */
.t-cat{position:relative;width:56px;height:56px;flex:none;display:grid;place-items:center;border-radius:16px;color:var(--c,#8f8f96)}
.t-cat::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--c,#8f8f96);opacity:.169}
.t-cat .ico{position:relative;width:28px;height:28px;fill:currentColor}
[data-pv="1"]{--c:#8A54FF}
[data-pv="2"]{--c:#56b0ff}
[data-pv="3"]{--c:#fe9036}
[data-pv="4"]{--c:#99e689}

/* ===== what she does: home .fcard look ===== */
.tori-abilities-section .section-head{margin-bottom:64px}
.tori-abilities{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;width:1040px;max-width:100%;margin:0 auto}
.tori-abilities .fcard.tori-ability{position:relative;top:auto;max-width:none;margin:0;min-height:300px;padding:40px;gap:12px;
  --fill:var(--glass-30);background:radial-gradient(90% 110% at 100% 0%,var(--glow),transparent 62%),var(--fill)}
.tori-ability .t-cat{margin-bottom:auto}
.tori-ability h3{margin-top:24px;font:600 32px/1.2 var(--display);color:#fff}
.tori-ability p{font-size:18px;line-height:1.5;color:var(--muted)}

/* ===== what Tori can see: a home .section-card with small glass items ===== */
.tori-privacy-card{padding:120px 80px;display:flex;flex-direction:column;gap:64px;align-items:center}
.tori-privacy{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;width:1040px;max-width:100%}
.tori-pv{position:relative;display:flex;flex-direction:column;gap:12px;padding:32px;border-radius:var(--r-card);background:var(--glass-30)}
.tori-pv h3{margin-top:12px;font:600 24px/1.2 var(--display);color:#fff}
.tori-pv p{font-size:16px;line-height:1.5;color:var(--muted)}
.tori-privacy-more{margin-top:-24px;font-size:16px;line-height:1.5;color:var(--muted);text-align:center}
.tori-privacy-more a{color:#fff;font-weight:600;text-underline-offset:3px}
@media (hover:hover){.tori-privacy-more a:hover{color:var(--accent)}}

/* brand gradient stroke (1px masked ring), as on every home glass surface */
.tori-ability::before,.tori-pv::before{content:"";position:absolute;inset:0;padding:1px;border-radius:inherit;background:var(--stroke);pointer-events:none;
  -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,linear-gradient(#000 0 0);mask-composite:exclude}

@media (max-width:1023px){
  .tori-hero .hero-title{font-size:64px}
  html.lang-ka .tori-hero .hero-title{font-size:48px}
  .tori-privacy-card{padding:96px 40px}
}
@media (max-width:780px){
  /* hero: Tori centred, the two craft cut-outs tucked behind her and bleeding off the edges (html clips the overflow) */
  .tori-hero .hero-sub{width:100%}
  .tori-hero .hero-title{font-size:44px}
  html.lang-ka .tori-hero .hero-title{font-size:34px}
  .tori-hero .hero-title br{display:none}
  /* the desktop stage height (480px x --hs) must not apply here: the box would be shorter than the stage and the next
     section would start under Tori and her tags */
  .tori-hero .hero-stage-box{height:auto;margin-top:32px}
  .tori-stage{height:auto;min-height:320px;align-items:center}
  .tori-stage .layer{width:clamp(170px,30vw,240px)}
  .tori-stage .layer-thread{top:38%}
  .tori-stage .layer-gluegun{top:-4%}
  .tori-stage .layer-tori{position:relative;left:auto;top:auto;width:260px;height:260px;align-self:center}
  .tori-hero-mascot,.tori-stage .layer-tori .mascot-btn{width:260px!important;height:260px!important}
  .tori-halo{left:50%;top:50%;width:420px;height:420px;margin:-210px 0 0 -210px}

  /* abilities: the home sticky stacking cards */
  .tori-abilities-section .section-head{margin-bottom:32px}
  .tori-abilities{display:flex;flex-direction:column}
  .tori-abilities .fcard.tori-ability{position:sticky;top:88px;min-height:240px;padding:24px;border-radius:32px;--fill:rgba(0,0,0,.72)}
  .tori-abilities .fcard.tori-ability:nth-child(2){top:96px}
  .tori-abilities .fcard.tori-ability:nth-child(3){top:104px}
  .tori-abilities .fcard.tori-ability:nth-child(4){top:112px}
  .tori-ability h3{font-size:26px}
  .tori-ability p{font-size:16px}

  .tori-privacy-card{padding:72px 16px;gap:40px}
  .tori-privacy{grid-template-columns:minmax(0,1fr)}
  .tori-pv{padding:24px;border-radius:32px}
  .tori-privacy-more{margin-top:-16px}
}