/* Munkafüzetek hub (V3): fanned covers, workbook cards, page anatomy, opt-in box, topic links, knowledge pairs. */

/* Hero: six covers fanned on the stage */
.fz-nb{white-space:nowrap}
.fz-stage{height:clamp(500px,44vw,640px)}
.fz-stage .blob{inset:18% 3% 4% 5%;background:var(--sage)}
.fz-dots{position:absolute;left:6%;top:8%;z-index:1;display:flex;gap:10px}
.fz-fan{position:absolute;inset:0 0 12% 0;z-index:2}
.fz-fan a{position:absolute;left:34%;bottom:0;width:32%;transform-origin:50% 225%;transform:rotate(calc(var(--a,0deg) * var(--k,1))) translateY(var(--y,0px));transition:transform .75s var(--ease)}
html.js .fz-fan a[data-reveal]{transition:opacity .9s var(--ease) var(--d,0ms),translate 1.1s var(--ease) var(--d,0ms),transform .75s var(--ease) 0ms}
.fz-fan img{width:100%;border-radius:3px;box-shadow:0 4px 10px rgba(46,62,52,.08),0 30px 50px -26px rgba(46,62,52,.5)}
.fz-fan a:nth-child(1){--a:-19deg}
.fz-fan a:nth-child(2){--a:-11.4deg}
.fz-fan a:nth-child(3){--a:-3.8deg}
.fz-fan a:nth-child(4){--a:3.8deg}
.fz-fan a:nth-child(5){--a:11.4deg}
.fz-fan a:nth-child(6){--a:19deg}
.fz-fan:hover{--k:1.1}
.fz-fan a:hover,.fz-fan a:focus-visible{z-index:8;--y:-30px!important}
.fz-stage .note{left:auto;right:-3%;top:2%;bottom:auto;--r:5deg;max-width:240px;z-index:6}
.fz-stage .doodle{left:auto;right:16%;top:17%;width:110px;height:80px;z-index:6}

/* Workbook cards */
.fz-books{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(64px,6vw,96px) clamp(28px,3vw,46px)}
.fz-book{position:relative;display:flex;flex-direction:column}
.fz-book-media{position:relative;display:block;overflow:hidden;aspect-ratio:4/3.4;border-radius:var(--radius);background:var(--tint,var(--sage));isolation:isolate}
.fz-book-media img{position:absolute;bottom:-36%;width:54%;border-radius:2px;transition:transform .9s var(--ease)}
.fz-book-media .is-cover{left:21%;z-index:2;transform:rotate(-4deg);box-shadow:0 4px 10px rgba(46,62,52,.1),0 26px 40px -22px rgba(46,62,52,.55)}
.fz-book-media .is-page{left:38%;z-index:1;transform:rotate(5deg) translateY(14px);box-shadow:var(--shadow-m)}
.fz-book:hover .is-cover{transform:rotate(-6deg) translate(-12px,-16px)}
.fz-book:hover .is-page{transform:rotate(9deg) translate(30px,-4px)}
.fz-book-num{position:absolute;left:22px;top:12px;z-index:3;font:italic 400 54px/1 var(--serif);letter-spacing:-.03em;color:var(--green-soft-ink)}
.fz-book-kicker{margin-top:28px;text-wrap:balance;font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--green)}
.fz-book h3{margin:12px 0 12px;font-size:clamp(26px,2.2vw,32px)}
.fz-book h3 a{text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .5s var(--ease)}
.fz-book h3 a:hover{background-size:100% 1px}
.fz-book>p:not([class]){font-size:15.5px;line-height:1.7;color:var(--muted)}
.fz-book-end{display:flex;align-items:flex-start;gap:10px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:14px;line-height:1.55;color:var(--ink)}
.fz-book-end .icon{width:18px;height:18px;margin-top:2px;color:var(--green-soft);stroke-width:2}
.fz-book-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:auto;padding-top:22px}
.fz-btn-sm{min-height:46px;padding:10px 20px;font-size:13.5px}

/* What is inside one workbook */
.fz-anatomy{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:clamp(48px,6vw,100px);align-items:start}
.fz-roles{list-style:none;margin-top:40px;border-top:1px solid var(--line-2)}
.fz-roles li{display:grid;grid-template-columns:86px minmax(0,1fr);gap:18px;padding:18px 12px 18px 0;border-bottom:1px solid var(--line-2);transition:background-color .35s,padding .45s var(--ease)}
html.js .fz-roles li[data-reveal]{transition:opacity .9s var(--ease) var(--d,0ms),translate 1.1s var(--ease) var(--d,0ms),background-color .35s 0ms,padding .45s var(--ease) 0ms}
.fz-roles li:hover{padding-left:12px;background:var(--sage-2)}
.fz-role-no{display:flex;align-items:center;gap:10px;height:28px;font:italic 400 24px/1 var(--serif);color:var(--green);white-space:nowrap}
.fz-role-no::before{content:'';width:10px;height:10px;flex:none;border-radius:50%;background:var(--rc)}
.fz-roles b{display:block;text-wrap:balance;font:400 21px/1.25 var(--serif);letter-spacing:-.02em;color:var(--ink)}
.fz-roles p{margin-top:4px;font-size:14.5px;line-height:1.65;color:var(--muted)}
.fz-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.fz-limit{max-width:560px;margin-top:28px}
[data-role="purpose"]{--rc:#9cb6c1}
[data-role="own"]{--rc:var(--green-soft)}
[data-role="ask"]{--rc:#d4a28b}
[data-role="decide"]{--rc:#c9a76f}
[data-role="end"]{--rc:#9a8fb5}
[data-role="cover"]{--rc:var(--line-2)}
.fz-sample{position:sticky;top:calc(var(--header) + 28px)}
.fz-pages{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px 14px}
.fz-page{position:relative;display:block;border-radius:3px;background:#fff;box-shadow:var(--shadow-s);transition:transform .5s var(--ease),box-shadow .5s var(--ease),opacity .4s}
.fz-page img{width:100%;aspect-ratio:990/1400;border-radius:3px 3px 0 0;object-fit:cover}
.fz-page::after{content:'';display:block;height:5px;border-radius:0 0 3px 3px;background:var(--rc)}
.fz-page-no{position:absolute;left:7px;bottom:13px;min-width:24px;height:24px;padding:0 7px;border-radius:99px;background:rgba(255,255,255,.94);box-shadow:0 1px 4px rgba(46,62,52,.14);font:600 11.5px/24px var(--sans);text-align:center;color:var(--ink)}
.fz-zoom{position:absolute;right:8px;bottom:13px;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--green);color:#fff;box-shadow:0 4px 12px -4px rgba(30,45,38,.5);transition:transform .4s var(--ease)}
.fz-zoom::before{content:'';width:14px;height:14px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21M10.5 7.5v6M7.5 10.5h6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21M10.5 7.5v6M7.5 10.5h6'/%3E%3C/svg%3E") center/contain no-repeat}
html.js .fz-page[data-reveal]{transition:opacity .9s var(--ease) var(--d,0ms),translate 1.1s var(--ease) var(--d,0ms),transform .5s var(--ease) 0ms,box-shadow .5s var(--ease) 0ms}
.fz-page img,.fz-page-no{transition:opacity .4s var(--ease)}
a.fz-page:hover,a.fz-page:focus-visible{transform:translateY(-6px);box-shadow:var(--shadow-m)}
a.fz-page:hover .fz-zoom{transform:scale(1.12)}
span.fz-page img{filter:saturate(.9)}
.fz-anatomy:has(.fz-roles li[data-role="purpose"]:hover) .fz-page:not([data-role="purpose"]) :is(img,.fz-page-no),
.fz-anatomy:has(.fz-roles li[data-role="own"]:hover) .fz-page:not([data-role="own"]) :is(img,.fz-page-no),
.fz-anatomy:has(.fz-roles li[data-role="ask"]:hover) .fz-page:not([data-role="ask"]) :is(img,.fz-page-no),
.fz-anatomy:has(.fz-roles li[data-role="decide"]:hover) .fz-page:not([data-role="decide"]) :is(img,.fz-page-no),
.fz-anatomy:has(.fz-roles li[data-role="end"]:hover) .fz-page:not([data-role="end"]) :is(img,.fz-page-no){opacity:.25}
.fz-sample-cap{margin-top:22px;font-size:13px;line-height:1.6;color:var(--muted)}

/* Opt-in box: all six */
.fz-optin{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(36px,5vw,80px);align-items:center;margin-top:clamp(72px,8vw,120px)}
.fz-optin-copy .eyebrow{margin-bottom:18px}
.fz-optin h3{font-size:clamp(32px,3.2vw,48px);line-height:1.06;letter-spacing:-.04em}
.fz-optin-copy>p:not([class]){max-width:440px;margin-top:20px;font-size:15.5px;line-height:1.7;color:var(--muted)}
.fz-mini{display:flex;align-items:flex-end;height:clamp(118px,11vw,150px);margin:0 0 30px;padding-left:5%}
.fz-mini img{flex:none;width:clamp(64px,6vw,82px);margin-left:-3.5%;border-radius:2px;box-shadow:0 14px 24px -14px rgba(46,62,52,.55);transform-origin:50% 100%;transition:transform .6s var(--ease),translate .6s var(--ease)}
.fz-mini img:nth-child(1){margin-left:0;transform:rotate(-12deg) translateY(8px)}
.fz-mini img:nth-child(2){transform:rotate(-7deg) translateY(2px)}
.fz-mini img:nth-child(3){transform:rotate(-2deg)}
.fz-mini img:nth-child(4){transform:rotate(3deg)}
.fz-mini img:nth-child(5){transform:rotate(8deg) translateY(2px)}
.fz-mini img:nth-child(6){transform:rotate(13deg) translateY(8px)}
.fz-optin:hover .fz-mini img{translate:0 -6px}
.fz-optin-form{padding:clamp(22px,2.4vw,32px);border-radius:22px;background:var(--sage-2)}

/* Workbook to workshop */
.fz-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.fz-link{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:26px;padding:20px 26px 20px 22px;border:1px solid var(--line);border-radius:24px;background:var(--white);color:inherit;text-decoration:none;transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .4s}
html.js .fz-link[data-reveal]{transition:opacity .9s var(--ease) var(--d,0ms),translate 1.1s var(--ease) var(--d,0ms),transform .5s var(--ease) 0ms,box-shadow .5s var(--ease) 0ms,border-color .4s 0ms}
.fz-link:hover{transform:translateY(-4px);border-color:transparent;box-shadow:var(--shadow-m)}
.fz-link-art{position:relative;width:138px;height:104px;flex:none}
.fz-link-art .is-cover{position:absolute;left:4px;top:2px;width:68px;border-radius:2px;box-shadow:0 12px 20px -12px rgba(46,62,52,.55);transform:rotate(-6deg);transition:transform .6s var(--ease)}
.fz-link-art .is-photo{position:absolute;right:0;bottom:0;width:80px;height:80px;border:4px solid #fff;border-radius:50%;object-fit:cover;box-shadow:var(--shadow-s);transition:transform .6s var(--ease)}
.fz-link:hover .is-cover{transform:rotate(-10deg) translate(-4px,-4px)}
.fz-link:hover .is-photo{transform:scale(1.06)}
.fz-link-text small{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:550;line-height:1.35;color:var(--green)}
.fz-link-text small::after{content:'→'}
.fz-link-text b{display:block;margin-top:6px;font:400 clamp(22px,1.9vw,27px)/1.15 var(--serif);letter-spacing:-.03em;color:var(--ink)}
.fz-link-text>span{display:block;margin-top:6px;font-size:14.5px;line-height:1.6;color:var(--muted)}
.fz-link.is-main{background:var(--green-deep);border-color:var(--green-deep)}
.fz-link.is-main small{color:#cfe0c8}
.fz-link.is-main b{color:#fff}
.fz-link.is-main .fz-link-text>span{color:#c9d6c5}
.fz-links-foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px 28px;margin-top:clamp(40px,5vw,64px);padding-top:26px;border-top:1px solid var(--line);font-size:14.5px;color:var(--muted)}

/* Workbook and knowledge booklet pairs */
.fz-tools{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(48px,6vw,100px);align-items:center}
.fz-tools p+p{margin-top:16px}
.fz-tools h2{font-size:clamp(34px,3.6vw,54px)}
.fz-know{list-style:none;border-top:1px solid #d9d0c2}
.fz-know li{display:flex;justify-content:space-between;align-items:center;gap:14px 20px;padding:17px 0;border-bottom:1px solid #d9d0c2}
.fz-know-title{font:400 20px/1.25 var(--serif);letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.fz-know-links{display:flex;gap:8px;flex:none}
.fz-know-links a{padding:7px 14px;border:1px solid #cfc5b5;border-radius:999px;background:rgba(255,255,255,.6);font-size:13px;font-weight:500;line-height:1.3;color:var(--ink);text-decoration:none;transition:background-color .3s,border-color .3s,color .3s}
.fz-know-links a:hover{background:var(--green);border-color:var(--green);color:#fff}
.fz-know-foot{display:flex;flex-wrap:wrap;gap:12px 30px;margin-top:26px}

/* Closing */
.fz-closing .price-hint{margin-top:22px}
.fz-closing .closing-art .polaroid{z-index:2;right:4%;top:8%;width:min(400px,86%)}
#igy-kapod-meg .steps-4 b{text-wrap:balance}
.fz-closing .closing-art .polaroid img{aspect-ratio:3/2}

/* Responsive */
@media (max-width:1180px){
  .fz-roles li{grid-template-columns:72px minmax(0,1fr)}
}
@media (min-width:1021px) and (max-width:1180px){
  .fz-closing .closing-art .doodle{display:none}
}
@media (max-width:1020px){
  .fz-stage{height:clamp(440px,74vw,600px)}
  .fz-books{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fz-anatomy,.fz-optin,.fz-tools{grid-template-columns:1fr}
  .fz-sample{position:static;max-width:640px}
  .fz-links{grid-template-columns:1fr}
}
@media (max-width:680px){
  .fz-stage{height:min(104vw,430px)}
  .fz-stage .blob{inset:22% 0 4% 0}
  .fz-fan{inset:0 0 8% 0}
  .fz-fan a{left:33%;width:34%}
  .fz-stage .note{right:0;top:0;max-width:160px;font-size:21px;padding:11px 14px 10px}
  .fz-stage .doodle{display:none}
  .fz-dots{left:2%;top:6%}
  .fz-books{grid-template-columns:1fr;gap:64px}
  .fz-book-num{font-size:44px}
  .fz-roles li{grid-template-columns:62px minmax(0,1fr);gap:12px}
  .fz-role-no{font-size:20px;gap:8px}
  .fz-roles b{font-size:19px}
  .fz-pages{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 8px}
  .fz-page-no{left:4px;bottom:9px;min-width:20px;height:20px;padding:0 5px;font-size:10.5px;line-height:20px}
  .fz-zoom{right:4px;bottom:9px;width:24px;height:24px}
  .fz-zoom::before{width:11px;height:11px}
  .fz-optin{gap:28px}
  .fz-optin-form{padding:18px 16px;margin-inline:-6px}
  .fz-mini{height:auto;margin-bottom:24px;padding-left:4%}
  .fz-mini img{width:17%}
  .fz-link{grid-template-columns:1fr;gap:16px;padding:20px}
  .fz-link-art{width:124px;height:94px}
  .fz-link-art .is-cover{width:60px}
  .fz-link-art .is-photo{width:72px;height:72px}
  .fz-know li{flex-wrap:wrap}
  .fz-closing .closing-art{height:auto;padding-top:16px}
  .fz-closing .closing-art .polaroid{position:relative;right:auto;top:auto;width:92%;margin-left:auto}
  .fz-closing .closing-art .doodle{display:none}
}

/* Social: follow the same topics on video, Instagram and Pinterest, above the workbooks */
.fz-social .head{margin-bottom:clamp(36px,4vw,60px)}
.soc-grid{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:clamp(16px,2vw,28px);align-items:stretch}
.soc{display:flex;flex-direction:column;min-width:0;border-radius:var(--radius);background:var(--white);box-shadow:var(--shadow-s);color:inherit;text-decoration:none;overflow:hidden;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.soc:hover{transform:translateY(-4px);box-shadow:var(--shadow-m)}
.soc:focus-visible{outline:2px solid var(--green);outline-offset:4px}
.soc-media{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:var(--sage)}
.soc-media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.soc:hover .soc-media img{transform:scale(1.04)}
.soc-play{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:rgba(251,250,246,.92);box-shadow:var(--shadow-s)}
.soc-play::after{content:"";position:absolute;left:26px;top:20px;border-style:solid;border-width:12px 0 12px 19px;border-color:transparent transparent transparent var(--green)}
.soc-soon{position:absolute;left:14px;top:14px;padding:5px 11px;border-radius:999px;background:var(--paper);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--green)}
.soc-handle{position:absolute;left:14px;bottom:14px;padding:6px 12px;border-radius:999px;background:rgba(251,250,246,.92);font-size:13px;font-weight:600}
.soc-mosaic{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);grid-template-rows:repeat(2,minmax(0,1fr));gap:4px;background:var(--white)}
.soc-mosaic img{min-height:0;min-width:0}
.soc-mosaic img:first-child{grid-row:1/3}
.soc-body{display:flex;flex-direction:column;gap:8px;padding:20px 22px 24px}
.soc-net{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--green)}
.soc-body b{font:400 clamp(21px,1.8vw,25px)/1.15 var(--serif);letter-spacing:-.01em}
.soc-body span{font-size:15px;line-height:1.55;color:var(--muted)}
.soc-yt .soc-media{aspect-ratio:16/10}
@media (max-width:980px){.soc-grid{grid-template-columns:1fr 1fr}.soc-yt{grid-column:1/-1}.soc-yt .soc-media{aspect-ratio:16/8}}
@media (max-width:620px){.soc-grid{grid-template-columns:1fr}.soc-yt .soc-media{aspect-ratio:16/10}}
@media (prefers-reduced-motion:reduce){.soc,.soc-media img{transition:none}}