/* The blog's list pages in the story look of the home page (inc/blog-list.php): /blogs/, the three guide pages and the
   topic pages. Design system B (Warm Nordic), DESIGN.md section 7. Francis, 24 Oct 2026: "Make sure it looks the part
   of the our beautiful homepage".
   Loaded after shym-blog.css, whose parts it uses as they are: the full top with its glass panel, the cream bar half
   on the top, the story section head, the home page's tall guide cards, the project strips on a dark sheet, the
   product cards. This file adds the kind tabs in the cream bar, the topic chips, the cream guide cards, the page
   numbers and the white sheet of the best sellers. Every class starts with shym-blogs. */

/* ---------- 1. the top ---------- */
.shym-blogs p.shym-blog__eyebrow span.is-here{opacity:1}
.shym-blogs a.shym-look-rating.shym-blogs__rating{margin-top:24px}
.shym-blogs .shym-blog__hero-btns+a.shym-blogs__rating{margin-top:26px}
/* the most read guides on the glass panel: two lines each at most */
.shym-blogs .shym-blogs__most li a span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
@media (prefers-reduced-motion:no-preference){
  .shym-blogs .shym-blog__hero-copy>.shym-blogs__rating{animation-delay:.68s}
}

/* ---------- 2. the cream bar half on the top: every guide and each kind; the list here is a white tab ---------- */
.shym-blogs nav.shym-blogs__tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0;padding:10px;border-radius:18px;background:var(--cream)}
.shym-blogs a.shym-blogs__tab,.shym-blogs a.shym-blogs__tab:visited{display:flex;align-items:center;gap:14px;min-width:0;padding:14px 18px;border-radius:14px;color:var(--ink);transition:background .25s}
.shym-blogs a.shym-blogs__tab:hover{background:rgba(255,255,255,.55)}
.shym-blogs a.shym-blogs__tab:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.shym-blogs a.shym-blogs__tab.is-on{background:var(--white)}
.shym-blogs a.shym-blogs__tab .shym-blog__fact-icon{transition:background .25s}
.shym-blogs a.shym-blogs__tab:not(.is-on):hover .shym-blog__fact-icon{background:var(--orange)}
.shym-blogs a.shym-blogs__tab>span:last-child{display:flex;flex-direction:column;min-width:0}
.shym-blogs a.shym-blogs__tab b{font:600 17px/1.3 var(--font);letter-spacing:-.01em;color:var(--ink)}
.shym-blogs a.shym-blogs__tab i{font:normal 400 14px/1.5 var(--font);color:var(--body)}

/* ---------- 3. the sauna topics: chips (DESIGN.md, Chips); the topic here is Plum ink ---------- */
.shym-blogs .shym-blogs__topics{display:flex;align-items:center;flex-wrap:wrap;gap:12px 20px;margin-top:clamp(40px,4vw,56px)}
.shym-blogs p.shym-blogs__topics-title{margin:0;font:600 12.5px/1.2 var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.shym-blogs nav.shym-blogs__chips{display:flex;flex-wrap:wrap;gap:8px}
.shym-blogs a.shym-blogs__chip,.shym-blogs a.shym-blogs__chip:visited{display:inline-flex;align-items:center;gap:7px;min-height:32px;padding:4px 14px;border-radius:999px;background:var(--cream);color:var(--ink);font:500 13px/1.2 var(--font);white-space:nowrap;transition:background .2s,color .2s}
.shym-blogs a.shym-blogs__chip i{font:normal 400 12px/1 var(--font);color:var(--muted);transition:color .2s}
.shym-blogs a.shym-blogs__chip:hover{background:var(--line)}
.shym-blogs a.shym-blogs__chip:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.shym-blogs a.shym-blogs__chip.is-on{background:var(--ink);color:var(--white)}
.shym-blogs a.shym-blogs__chip.is-on i{color:rgba(255,255,255,.72)}

/* ---------- 4. page 1: the three newest, the home page's tall guide cards ---------- */
.shym-blogs .shym-blogs__new{padding-top:clamp(56px,5.6vw,88px)}

/* ---------- 5. every guide: the story section head, the cards, the page numbers ---------- */
.shym-blogs .shym-blogs__all{position:relative;padding:clamp(80px,8vw,128px) 0 clamp(108px,10vw,164px)}
.shym-blogs .shym-blogs__new+.shym-blogs__all{padding-top:clamp(96px,9vw,144px)}
.shym-blogs ul.shym-blogs__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0;padding:0;list-style:none}
.shym-blogs ul.shym-blogs__grid>li{display:flex;min-width:0;margin:0;padding:0}
.shym-blogs ul.shym-blogs__grid>li::before{display:none}
/* the card: the photo with round corners, a cream panel over its foot with the words (Francis, 24 Oct 2026, "card=ov
   ... let's have that one", the 5th of 6 looks) */
.shym-blogs ul.shym-blogs__grid{column-gap:clamp(18px,1.8vw,28px);row-gap:clamp(36px,3.4vw,52px)}
.shym-blogs a.shym-blogs__card,.shym-blogs a.shym-blogs__card:visited{display:flex;flex-direction:column;width:100%;color:var(--ink)}
.shym-blogs a.shym-blogs__card:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:18px}
.shym-blogs .shym-blogs__card-pic{position:relative;display:block;aspect-ratio:5/4;overflow:hidden;border-radius:18px;background:var(--line)}
.shym-blogs .shym-blogs__card-pic img{display:block;width:100%;height:100%;max-width:none;margin:0;object-fit:cover;transition:transform 1.2s var(--slow)}
.shym-blogs a.shym-blogs__card:hover .shym-blogs__card-pic img{transform:scale(1.05)}
.shym-blogs .shym-blogs__card-pic.is-empty{display:grid;place-items:center;background:var(--ink);color:rgba(255,255,255,.4)}
.shym-blogs .shym-blogs__card-pic.is-empty svg{width:56px;height:56px}
.shym-blogs .shym-blogs__card-words{position:relative;display:flex;flex-direction:column;gap:10px;flex:1;margin:-64px 14px 0;padding:22px 22px 24px;border-radius:16px;background:var(--cream);transition:transform .45s var(--slow)}
.shym-blogs a.shym-blogs__card:hover .shym-blogs__card-words{transform:translateY(-6px)}
.shym-blogs .shym-blogs__card-words>i{padding-right:48px;font:normal 500 14px/1.45 var(--font);color:var(--muted)}
.shym-blogs .shym-blogs__card-words>i span{white-space:nowrap}
.shym-blogs h3.shym-blogs__card-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;margin:0;font:600 20px/1.25 var(--font);letter-spacing:-.015em;text-transform:none;color:var(--ink);text-wrap:balance}
.shym-blogs .shym-blogs__card-text{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font:400 15px/1.55 var(--font);color:var(--body)}
.shym-blogs .shym-blogs__card-go{position:absolute;top:16px;right:16px;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--white);color:var(--ink);transition:background .3s,color .3s}
.shym-blogs .shym-blogs__card-go svg{width:16px;height:16px;transition:transform .3s}
.shym-blogs a.shym-blogs__card:hover .shym-blogs__card-go,.shym-blogs a.shym-blogs__card:focus-visible .shym-blogs__card-go{background:var(--orange);color:var(--white)}
.shym-blogs a.shym-blogs__card:hover .shym-blogs__card-go svg{transform:translateX(2px)}

/* the page numbers: round, a Line edge; the page here is Plum ink; newer and older are round arrows */
.shym-blogs nav.shym-blogs__pages{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin-top:clamp(48px,5vw,72px)}
.shym-blogs .shym-blogs__pg,.shym-blogs a.shym-blogs__pg:visited{display:grid;place-items:center;min-width:48px;height:48px;padding:0 6px;border-radius:999px;color:var(--ink);font:600 15px/1 var(--font);box-shadow:inset 0 0 0 1.5px var(--line);transition:background .25s,color .25s,box-shadow .25s}
.shym-blogs a.shym-blogs__pg:hover,.shym-blogs a.shym-blogs__pg:focus-visible{background:var(--ink);color:var(--white);box-shadow:inset 0 0 0 1.5px var(--ink)}
.shym-blogs .shym-blogs__pg.is-on{background:var(--ink);color:var(--white);box-shadow:none}
.shym-blogs .shym-blogs__pg.is-gap{min-width:24px;box-shadow:none;color:var(--muted)}
.shym-blogs .shym-blogs__pg.is-step{box-shadow:inset 0 0 0 1.5px var(--ink)}
.shym-blogs .shym-blogs__pg.is-step:first-child{margin-right:8px}
.shym-blogs .shym-blogs__pg.is-step:last-child{margin-left:8px}
.shym-blogs .shym-blogs__pg svg{width:17px;height:17px}
.shym-blogs .shym-blogs__pg.is-prev svg{transform:rotate(180deg)}
.shym-blogs .shym-blogs__pg.is-off{opacity:.3}

/* ---------- 4 and 5 on screens 1600 px and wider: the home page's wide column (1800 px), as its best sellers ----------
   Francis, 24 Oct 2026, on the newest row and the list: "What I meant when I said it needed wider layouts are these 2
   sections". The row then has a 4th card and the list 4 cards a row; page 1's list starts with the 4th newest again
   (is-dup), shown only where the row does not show it, so every row is full on any screen. */
.shym-blogs ul.shym-blog__guides>li.is-fourth{display:none}
@media (min-width:1600px){
  .shym-blogs .shym-blogs__new>.shym-blog__wrap,.shym-blogs .shym-blogs__all>.shym-blog__wrap{width:min(1800px,calc(100% - 48px))}
  .shym-blogs ul.shym-blog__guides{grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));height:clamp(520px,34vw,640px)}
  .shym-blogs ul.shym-blog__guides>li.is-fourth{display:flex}
  .shym-blogs ul.shym-blogs__grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .shym-blogs ul.shym-blogs__grid>li.is-dup{display:none}
}

/* ---------- 6. the project strips: on a dark sheet that rises over the list (shym-blog.css) ---------- */

/* ---------- 7. the best sellers on a white sheet over the dark one, as "Keep reading" on a post ---------- */
.shym-blogs .shym-blog__products.shym-blogs__shop{position:relative;z-index:3;margin-top:-28px;padding:clamp(80px,9vw,128px) 0 clamp(108px,10vw,156px);border-top:0;border-radius:28px 28px 0 0;background:var(--white)}

/* ---------- a change of list in place (shym-blog-list.js) ---------- */
/* while the next list is on its way the guides fade back; the new ones fade in once */
.shym-blogs .shym-blogs__new,.shym-blogs .shym-blogs__all{transition:opacity .2s var(--soft)}
.shym-blogs.is-leaving .shym-blogs__new,.shym-blogs.is-leaving .shym-blogs__all{opacity:.45}
/* a list that came in place: the cream bar stays still (its rise in would move it under the finger); the title's
   words still rise, so the change shows */
.shym-blogs.is-swapped .shym-blog__factsec{animation:none}
/* the script puts a list that came in place where it belongs; the browser must not move it again */
.shym-blogs.is-swapped{overflow-anchor:none}
.shym-blogs.is-leaving a.shym-blogs__tab,.shym-blogs.is-leaving a.shym-blogs__chip,.shym-blogs.is-leaving .shym-blogs__pg{pointer-events:none}
@media (prefers-reduced-motion:no-preference){
  .shym-blogs.is-arriving .shym-blogs__new,.shym-blogs.is-arriving .shym-blogs__all{animation:shym-blogs-in .4s var(--soft) both}
}
@keyframes shym-blogs-in{from{opacity:0}to{opacity:1}}

/* ---------- tablets ---------- */
@media (max-width:1024px){
  .shym-blogs nav.shym-blogs__tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .shym-blogs ul.shym-blogs__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- phones ---------- */
@media (max-width:767px){
  .shym-blogs nav.shym-blogs__tabs{gap:4px;padding:6px}
  .shym-blogs a.shym-blogs__tab,.shym-blogs a.shym-blogs__tab:visited{gap:10px;padding:12px}
  .shym-blogs a.shym-blogs__tab .shym-blog__fact-icon{flex-basis:32px;width:32px;height:32px}
  .shym-blogs a.shym-blogs__tab .shym-blog__fact-icon svg{width:17px;height:17px}
  .shym-blogs a.shym-blogs__tab b{font-size:15px}
  .shym-blogs .shym-blogs__tab-more{display:none}
  .shym-blogs a.shym-blogs__tab i{font-size:13px}
  /* the chips: one row that swipes */
  .shym-blogs .shym-blogs__topics{display:block;margin-top:36px}
  .shym-blogs p.shym-blogs__topics-title{margin-bottom:12px}
  .shym-blogs nav.shym-blogs__chips{flex-wrap:nowrap;margin-right:-16px;padding-right:16px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
  .shym-blogs nav.shym-blogs__chips::-webkit-scrollbar{display:none}
  .shym-blogs .shym-blogs__new{padding-top:48px}
  .shym-blogs .shym-blogs__all,.shym-blogs .shym-blogs__new+.shym-blogs__all{padding:64px 0 96px}
  .shym-blogs ul.shym-blogs__grid{grid-template-columns:minmax(0,1fr);row-gap:32px}
  .shym-blogs .shym-blogs__card-words{margin:-48px 10px 0;padding:18px 18px 20px}
  .shym-blogs h3.shym-blogs__card-title{font-size:19px}
  .shym-blogs nav.shym-blogs__pages{gap:6px}
  .shym-blogs .shym-blogs__pg,.shym-blogs a.shym-blogs__pg:visited{min-width:44px;height:44px}
  .shym-blogs .shym-blogs__pg.is-step:first-child{margin-right:4px}
  .shym-blogs .shym-blogs__pg.is-step:last-child{margin-left:4px}
  .shym-blogs .shym-blog__products.shym-blogs__shop{margin-top:-22px;padding:64px 0 92px;border-radius:22px 22px 0 0}
}