/* SAFARIBOK | Fil: modern.css | Version: 1.0.0 | 2026-10-07 | Original frontend v35. */
/* SAFARIBOK1 · modern.css · v1.0.2 · 2026-10-05
   Alternativ formgivning. Originalet i Safaribok ändras inte. */
:root{--green:#163c2c;--ink:#13281f;--muted:#617168;--accent:#e4ad55;--accent-hover:color-mix(in srgb,var(--accent) 88%,#163c2c);--gold:var(--accent);--paper:#f1f4ef;--line:#dfe6de;--lime:var(--accent);--orange:#ff813b}body{font-family:'Manrope',sans-serif;font-size:16px;background:#fbfcf9}h1,h2,.display,.stat strong{font-family:'Space Grotesk',sans-serif;font-weight:600;letter-spacing:-1.8px}h3{font-family:'Space Grotesk';font-weight:600}header{height:86px;padding:0 3.5%;gap:24px;background:#fbfcf9}.brand span{font-family:'Space Grotesk';font-size:30px;font-weight:700}.brand small{font-family:'Manrope';font-size:9px;letter-spacing:2.3px}nav{gap:21px;font-size:14px}nav a{font-weight:600}.header-tools{gap:12px}.header-tools .outline{display:none}.header-tools .wh-dropdown{width:106px}.icon-link{position:relative;width:35px;height:36px;display:grid;place-items:center;font-size:29px}#cart-badge{position:absolute;right:-3px;top:-3px;font-size:10px;line-height:18px;min-width:18px;text-align:center;border-radius:50%;background:var(--green);color:white}.button,.outline{border-radius:30px;font-size:14px;font-weight:700;padding:14px 23px}.button.gold{background:var(--lime);border-color:var(--lime)}.eyebrow{font-size:12px;letter-spacing:1.7px;font-weight:800}section,.page{max-width:1350px;padding:64px 34px}.page h1{font-size:58px}.page h2{font-size:36px}.page-head p{font-size:17px}.section-head h2{font-size:39px}.section-head .text-link{font-weight:700}footer{background:#10251d}.image-wrap{border-radius:15px;height:270px}.animal-card h3{font-size:23px}.image-label{border-radius:20px;padding:5px 12px;font-size:12px}.grid{gap:30px 24px}.feature{background:#eaf0e5}.feature-picture{border-radius:20px}.place-card{border-radius:17px;background:white}.guide-card,.aside,.community-card,.book-card{border-radius:17px}.travel-intro{border-radius:22px}.search{border:1px solid #dde4d8;border-radius:14px;padding:7px;margin:0;box-shadow:none}.search button{border-radius:9px;background:var(--lime);padding:14px 22px}.search input{font-size:15px}.hero-modern{max-width:1600px;margin:auto;padding:22px 3.5% 0}.hero-topline{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px 0 28px}.hero-topline>div{max-width:570px}.hero-topline .eyebrow{margin-bottom:12px;color:#496346}.hero-topline h1{font-size:65px;line-height:1.02;letter-spacing:-3px}.hero-topline h1 span{color:#5c7834}.hero-search{width:470px}.hero-search small{display:block;font-size:12px;margin:12px 5px;color:var(--muted)}.hero-mosaic{display:grid;grid-template-columns:1.5fr .73fr .85fr;grid-template-rows:240px 240px;gap:16px}.hero-panel{position:relative;overflow:hidden;border-radius:20px;background:var(--green);color:white;display:block}.hero-panel img{width:100%;height:100%;object-fit:cover;transition:transform .8s}.hero-panel:hover img{transform:scale(1.035)}.hero-panel.large{grid-row:span 2}.hero-panel.bird{grid-row:span 2}.hero-panel.large:after,.hero-panel.bird:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#10251de6,transparent 65%)}.hero-panel-content{position:absolute;bottom:30px;left:30px;right:25px;z-index:2}.hero-panel-content h2{font-size:42px;line-height:1.05;margin:13px 0 25px}.hero-panel-content .eyebrow{color:#e2eecb;margin:0}.hero-panel .floating-label{position:absolute;top:22px;left:22px;z-index:2;background:#ffffffeb;color:#17352a;padding:7px 12px;border-radius:25px;font-size:11px;font-weight:700}.hero-panel .image-credit{position:absolute;top:23px;right:22px;font-size:10px;z-index:2;color:white;text-shadow:0 1px 4px black}.hero-panel.bird .hero-panel-content{left:23px;bottom:26px}.hero-panel.bird h2{font-size:29px}.hero-quiz{padding:26px;background:var(--lime);color:#14291f}.hero-quiz .eyebrow{color:#536034}.hero-quiz .quiz-symbol{position:absolute;right:22px;top:15px;font-size:55px;font-family:'Space Grotesk';opacity:.2}.hero-quiz h3{font-size:28px;max-width:190px}.hero-quiz p{font-size:13px;margin:12px 0 18px;max-width:230px}.hero-community{padding:24px;background:#173c2c;color:white}.hero-community h3{font-size:25px}.hero-community p{font-size:13px;color:#c5d7c7;margin:12px 0 19px}.avatar-stack{display:flex;margin-bottom:15px}.avatar-stack span{width:28px;height:28px;display:grid;place-items:center;border:2px solid var(--green);border-radius:50%;background:var(--accent);color:#193025;font-size:10px;font-weight:800;margin-right:-6px}.hero-bottom{display:flex;justify-content:space-between;padding:26px 0;gap:25px;border-bottom:1px solid var(--line);font-size:13px}.hero-bottom strong{font-family:'Space Grotesk';font-size:23px;margin-right:9px}.hero-bottom .meta{color:var(--muted)}.hero-bottom a{font-weight:700;border-bottom:1px solid var(--green)}.category-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.category-card{position:relative;height:320px;border-radius:20px;overflow:hidden;color:white}.category-card img{width:100%;height:100%;object-fit:cover;transition:transform .7s}.category-card:hover img{transform:scale(1.06)}.category-card:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#10251de0,transparent 70%)}.category-card>div{position:absolute;bottom:24px;left:25px;z-index:1}.category-card h3{font-size:29px}.category-card small{font-size:13px}.photo-tile{position:relative}.photo-tile img{border-radius:15px;height:280px}.heart{position:absolute;right:13px;top:13px;width:38px;height:38px;border:0;border-radius:50%;background:#ffffffed;display:grid;place-items:center;z-index:5;box-shadow:0 2px 9px #0001;color:#172b21;font-size:24px}.heart.is-saved{color:#bd3f32;background:#fff}.photo-wrap{position:relative}.photo-wrap img{width:100%;display:block}.gallery-grid{gap:30px 20px}.photo-meta{display:flex;justify-content:space-between;align-items:start;margin-top:12px;gap:10px}.photo-meta strong{font-size:15px}.photo-meta small{font-size:12px;color:var(--muted)}.photo-meta .species-link{font-size:12px;text-decoration:underline;white-space:nowrap}.notice{border-radius:0 12px 12px 0;background:#f0f4e9}.detail-image{border-radius:20px}.reading p{font-size:17px}.book-image{border-radius:10px}.book-placeholder{border-radius:3px;font-family:'Space Grotesk';color:white}.quiz{border-radius:20px}.bottom-call{background:#10251d}.discovery-card{border-radius:20px}.discovery-card img{border-radius:15px}.pill{font-size:14px;font-weight:600}.filters{align-items:center}.filters input{border-radius:10px}.filters>.wh-dropdown{width:200px}.page-head .eyebrow{margin-bottom:14px}.split-heading{display:flex;justify-content:space-between;align-items:center;gap:25px}.split-heading p{max-width:480px;color:var(--muted)}#toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(100px);background:#173c2c;color:white;padding:13px 23px;border-radius:30px;font-size:14px;box-shadow:0 8px 25px #0002;z-index:3000;transition:transform .25s;pointer-events:none}#toast.visible{transform:translateX(-50%) translateY(0)}.local-label{background:#eff3e9;color:#526341;padding:5px 10px;border-radius:20px;font-size:12px;display:inline-block}.dark-section{background:#10251d;color:white}.dark-section .eyebrow{color:var(--lime)}.dark-section p{color:#c4d2c4}.dark-section .text-link{color:var(--lime);border-color:var(--lime)}
@media(max-width:1200px){nav{gap:15px;font-size:13px}.hero-mosaic{grid-template-columns:1.5fr .9fr .9fr}.hero-panel-content h2{font-size:35px}.hero-topline h1{font-size:55px}.hero-search{width:420px}.header-tools .wh-dropdown{width:93px}}@media(max-width:950px){header{gap:15px}.header-tools{gap:8px}nav{gap:12px}.hero-topline{display:block}.hero-search{width:100%;margin:28px 0 0}.hero-topline h1{font-size:55px}.hero-mosaic{grid-template-columns:1.3fr 1fr;grid-template-rows:230px 230px 230px}.hero-panel.large{grid-row:span 2}.hero-panel.bird{grid-row:auto;grid-column:1}.hero-quiz{grid-row:1;grid-column:2}.hero-community{grid-row:2;grid-column:2}.hero-panel.bird{grid-column:1/-1}.hero-panel.bird img{object-position:50% 40%}.hero-panel.bird .hero-panel-content{bottom:22px}.hero-bottom{flex-wrap:wrap}.category-card{height:270px}.grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:780px){header{height:77px;padding:0 20px}.brand span{font-size:25px}.brand small{font-size:8px}.header-tools .wh-dropdown{display:none}nav{top:77px;gap:16px;padding:20px}.hero-modern{padding:6px 18px 0}.hero-topline{padding:18px 0 22px}.hero-topline h1{font-size:44px;letter-spacing:-2px}.hero-topline .eyebrow{font-size:10px}.hero-search{margin-top:23px}.hero-search small{font-size:11px}.hero-mosaic{grid-template-columns:1fr 1fr;grid-template-rows:360px 230px 230px;gap:12px}.hero-panel.large{grid-row:1;grid-column:1/-1}.hero-panel-content{left:23px;bottom:23px}.hero-panel-content h2{font-size:35px;max-width:250px}.hero-panel.bird{grid-column:1/-1;grid-row:3}.hero-quiz{grid-row:2;grid-column:1;padding:20px}.hero-community{grid-row:2;grid-column:2;padding:20px}.hero-quiz h3,.hero-community h3{font-size:23px}.hero-quiz .eyebrow,.hero-community .eyebrow{font-size:10px;margin-bottom:12px}.hero-quiz p,.hero-community p{font-size:12px}.hero-quiz .button,.hero-community .button{font-size:12px;padding:11px 15px}.avatar-stack{display:none}.hero-bottom{gap:15px;padding:20px 0;font-size:11px}.hero-bottom strong{font-size:19px}.hero-bottom .meta{display:none}section,.page{padding:43px 21px}.section-head h2{font-size:32px}.page h1{font-size:41px;letter-spacing:-1.7px}.page h2{font-size:31px}.page-head p{font-size:15px}.grid{grid-template-columns:1fr 1fr;gap:23px 15px}.image-wrap{height:205px}.animal-card h3{font-size:20px}.category-grid{grid-template-columns:1fr}.category-card{height:230px}.gallery-grid{grid-template-columns:1fr 1fr;gap:25px 14px}.photo-tile img{height:215px}.photo-meta{display:block}.photo-meta strong{font-size:14px}.photo-meta small{font-size:11px}.photo-meta .species-link{display:block;margin-top:5px}.heart{width:34px;height:34px;right:9px;top:9px;font-size:22px}.split-heading{display:block}.filters>.wh-dropdown{width:calc(50% - 8px)}.filters{gap:12px}.filters input{flex-basis:100%}.header-tools .icon-link{width:27px;font-size:25px}.reading p{font-size:16px}}
@media(max-width:380px){.hero-mosaic{grid-template-rows:330px 260px 215px}.hero-quiz,.hero-community{padding:16px}.image-wrap{height:170px}.photo-tile img{height:170px}.brand small{display:none}}
/* v1.0.2 · 2026-10-05 · Consistent image cards and explicit destinations. */
.article-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.article-card{display:flex;flex-direction:column;min-width:0;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:white;transition:border-color .2s,box-shadow .2s}.article-card>img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}.article-card>div{flex:1;display:flex;flex-direction:column;padding:22px}.article-card h3{font-size:25px;line-height:1.25;letter-spacing:-.6px}.article-card p{font-size:15px;margin-bottom:22px;color:var(--muted)}.article-card .eyebrow{font-size:12px;margin-bottom:12px}.card-action{display:inline-flex!important;align-items:center;justify-content:center;align-self:flex-start;padding:9px 15px;border-radius:25px;border:1px solid var(--green);font-size:14px;font-weight:700;line-height:1.4;background:var(--green);color:white;margin-top:auto}.article-card:hover,.quiz-teaser:hover,.forum-preview-card:hover{border-color:#738e65;box-shadow:0 8px 22px #203b2810}.article-card:hover .card-action,.quiz-teaser:hover .card-action{background:#2e563e}.quiz-teaser div{display:flex;flex-direction:column}.quiz-teaser h3{margin-bottom:20px}.dark-section .quiz-teaser .card-action{background:var(--lime);color:var(--green);border-color:var(--lime)}.forum-preview{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.forum-preview-card{display:flex;flex-direction:column;gap:18px;padding:26px;background:white;border:1px solid var(--line);border-radius:18px;min-width:0}.forum-preview-card .eyebrow{margin:0}.forum-preview-card h3{font-size:26px}.forum-preview-card small{color:var(--muted);font-size:14px}.forum-preview-card .card-action{margin-top:4px}.category-card{height:auto;aspect-ratio:4/3}.category-card .card-action{background:white;color:var(--green);border-color:white;margin-top:14px}.category-card small{display:block}.category-card>div{right:20px}.category-card:after{background:linear-gradient(0deg,#10251df0,transparent 85%)}.hero-actions{display:flex;flex-wrap:wrap;gap:10px}.image-wrap{height:auto;aspect-ratio:4/3}.gallery-grid .photo-wrap img{height:auto;aspect-ratio:4/3}.detail-grid .photo-wrap .detail-image{height:auto;aspect-ratio:4/3;max-height:480px;object-fit:cover}.feature-photo-link{display:block;position:relative}.feature-picture{height:auto;aspect-ratio:4/3;display:block}.discovery-photo-link{display:block;position:relative}.discovery-photo-link img{height:auto;aspect-ratio:4/3;display:block}.discovery-photo-link span{position:absolute;bottom:16px;left:16px;background:white;color:var(--green);padding:9px 14px;border-radius:24px;font-weight:700;font-size:14px}.feature-grid{gap:40px}.hero-mosaic{grid-template-rows:225px 225px}.hero-quiz,.hero-community{display:flex;flex-direction:column;align-items:flex-start}.hero-quiz .button,.hero-community .button{margin-top:auto}.hero-panel-content h2{margin-bottom:18px}.hero-bottom{flex-wrap:wrap}.category-card h3{font-size:27px}
@media(max-width:950px){.article-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hero-mosaic{grid-template-columns:1fr 1fr;grid-template-rows:320px auto}.hero-panel.large{grid-row:1;grid-column:1}.hero-panel.bird{grid-row:1;grid-column:2}.hero-quiz{grid-row:2;grid-column:1}.hero-community{grid-row:2;grid-column:2}.hero-quiz,.hero-community{min-height:220px}.hero-panel-content h2{font-size:32px}.hero-panel .image-credit{top:60px;left:22px;right:auto}.hero-panel.large .hero-actions .button{font-size:13px;padding:11px 16px}}
@media(max-width:780px){.hero-mosaic{grid-template-rows:290px auto}.hero-panel.large{grid-row:1;grid-column:1}.hero-panel.bird{grid-row:1;grid-column:2}.hero-quiz{grid-row:2;grid-column:1}.hero-community{grid-row:2;grid-column:2}.hero-panel-content,.hero-panel.bird .hero-panel-content{left:18px;right:15px;bottom:18px}.hero-panel-content h2,.hero-panel.bird h2{font-size:27px}.hero-panel .floating-label{top:16px;left:16px;font-size:10px;max-width:calc(100% - 32px)}.category-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}.category-card{aspect-ratio:3/4}.category-card>div{left:16px;right:12px;bottom:16px}.category-card h3{font-size:24px}.category-card .card-action{font-size:13px;padding:8px 11px}.feature-grid{gap:28px}.photo-meta{min-height:60px}}
@media(max-width:600px){.article-grid,.forum-preview{grid-template-columns:1fr}.article-card{display:grid;grid-template-columns:120px minmax(0,1fr);align-items:stretch}.article-card>img{height:100%;aspect-ratio:auto;min-height:175px}.article-card>div{padding:18px}.article-card h3{font-size:22px}.article-card p{display:none}.article-card .card-action{margin-top:18px}.article-card .eyebrow{font-size:11px}.category-grid{grid-template-columns:1fr}.category-card{display:flex;align-items:center;aspect-ratio:auto;min-height:150px;background:white;border:1px solid var(--line);color:var(--ink)}.category-card img{width:125px;height:150px;flex-shrink:0}.category-card:after{display:none}.category-card>div{position:static;padding:20px}.category-card h3{font-size:25px}.category-card small{font-size:13px;color:var(--muted)}.category-card .card-action{background:var(--green);color:white;border-color:var(--green)}.hero-mosaic{grid-template-columns:1fr 1fr;grid-template-rows:260px auto}.hero-panel-content h2{font-size:24px}.hero-panel.bird h2{font-size:24px}.hero-panel-content .eyebrow,.hero-panel .floating-label,.hero-panel .image-credit{display:none}.hero-panel.large .hero-actions .button{padding:10px 12px;font-size:12px}.hero-panel.bird .button{font-size:12px;padding:11px 12px}.hero-quiz,.hero-community{min-height:240px}.hero-quiz h3,.hero-community h3{font-size:23px}.hero-quiz p,.hero-community p{font-size:14px}.hero-quiz .eyebrow,.hero-community .eyebrow{font-size:11px}.hero-topline h1{font-size:40px}.feature-photo-link{max-width:420px}.discovery-photo-link{max-width:360px}.discovery-card{grid-template-columns:1fr}.discovery-card img{height:auto}.article-grid{gap:18px}}
@media(max-width:380px){.hero-mosaic{grid-template-rows:255px auto}.hero-quiz,.hero-community{padding:16px;min-height:265px}.hero-panel-content,.hero-panel.bird .hero-panel-content{left:13px;right:10px}.hero-panel.large .hero-actions .button{font-size:11px}.article-card{grid-template-columns:100px minmax(0,1fr)}.category-card img{width:105px}}
.story-cover{height:auto;aspect-ratio:4/3;max-width:580px;display:block}.travel-intro img{min-height:0;aspect-ratio:4/3;object-fit:cover}.hero-panel{min-width:0}.hero-topline .search-hints a{border-color:var(--line);background:white}.hero-topline .search-hints{color:var(--muted)}

/* Gemensam accentknapp: färgen ändras enbart i --accent ovan. */
.button.gold,.search button,.dark-section .quiz-teaser .card-action{background:var(--accent);border-color:var(--accent);color:var(--green)}
.button.gold:hover,.search button:hover,.dark-section .quiz-teaser:hover .card-action{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--green)}

/* Menyn har egen mittkolumn på stora skärmar; verktygen stannar till höger. */
@media(min-width:1440px){header{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}header .brand{justify-self:start}header nav{margin:0;justify-self:center}header .header-tools{justify-self:end}}
@media(min-width:781px) and (max-width:1439px){header{display:flex}header nav{margin-left:auto}}

/* Diskret omdömesrad och en gemensam ingång till favoriterna. */
.hero-intro-row{display:flex;justify-content:space-between;align-items:center;gap:12px 24px;padding-top:18px;flex-wrap:wrap}
.hero-intro-row .eyebrow{margin:0;color:#496346;min-width:0}
.hero-review{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12px;white-space:nowrap;margin-left:auto}
.hero-review strong{color:var(--ink);font-size:13px}.hero-review-stars{display:flex;gap:3px;color:#9d651e;font-size:10px}
.favourite-count{position:absolute;right:-5px;top:-4px;min-width:18px;height:18px;line-height:18px;padding:0 4px;border-radius:12px;background:var(--accent);color:var(--green);font-size:10px;font-weight:800;text-align:center}
.hero-bottom{flex-wrap:wrap}.hero-bottom>span{white-space:nowrap}
@media(max-width:780px){.hero-intro-row{padding-top:18px;gap:10px}.hero-intro-row .eyebrow{font-size:10px;letter-spacing:1px}.hero-review{margin-left:0}.hero-topline{padding-top:16px}}