/* blogfoodie review cards. To add a review: copy one <a class="card"> block in index.html and change the link, photo, title and text. */
.reviews{padding:var(--s7) 0}
.reviews .sh{margin-bottom:var(--s5)}
.cards{display:grid;gap:var(--s3);grid-template-columns:1fr}
.card{display:flex;flex-direction:column;background:var(--surface);border:2px solid var(--text);border-radius:28px;overflow:hidden;text-decoration:none;color:var(--text);transition:transform .5s var(--out),box-shadow .5s var(--out)}
.card:hover{transform:translateY(-6px);box-shadow:0 14px 0 -2px var(--sunny)}
.card:active{transform:scale(.99)}
.card .ph{aspect-ratio:4/3;overflow:hidden;background:#000;border-bottom:2px solid var(--text)}
.card .ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s var(--out)}
.card:hover .ph img{transform:scale(1.04)}
.card .cb{display:flex;flex-direction:column;gap:var(--s1);padding:var(--s3);flex:1}
.card .meta{font-size:var(--t1);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--sunny)}
.card h3{font-size:var(--t4);line-height:1.02;letter-spacing:-.025em;margin:var(--s1) 0}
.card p{color:var(--muted);font-size:var(--t2);line-height:1.55}
.card .tags{display:flex;flex-wrap:wrap;gap:var(--s1);margin-top:auto;padding-top:var(--s2)}
.card .tag{border:2px solid var(--sunny);border-radius:999px;padding:4px 14px;font-size:var(--t1);font-weight:700;color:var(--sunny)}
.card .more{margin-top:var(--s2);font-weight:700;color:var(--text)}
.card .more .arr{display:inline-block;transition:transform .5s var(--out)}
.card:hover .more .arr{transform:translateX(4px)}
@media(min-width:700px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.cards{grid-template-columns:repeat(3,1fr)}}
/* review post extras */
.doc h2{font-size:var(--t4);margin:var(--s5) 0 var(--s2);max-width:none}
.doc ul{margin:0 0 var(--s3);padding-left:var(--s3);color:var(--muted);font-size:var(--t3);line-height:1.6}
.doc li{margin-bottom:var(--s1)}
.doc figure{margin:var(--s4) 0}
.doc figure img{width:100%;height:auto;display:block;border:2px solid var(--text);border-radius:24px}
.doc figcaption{color:var(--muted);font-size:var(--t1);margin-top:var(--s1)}
.doc .fine{font-size:var(--t1);color:var(--muted)}
/* photo layouts in posts */
.doc h2.part{margin-top:var(--s6);color:var(--sunny)}
.doc h3{font-size:var(--t3);line-height:1.1;margin:var(--s4) 0 var(--s1)}
.doc figure.tall{max-width:520px}
.doc .duo,.doc .trio{display:grid;gap:var(--s2);margin:var(--s4) 0;grid-template-columns:1fr 1fr}
.doc .duo figure,.doc .trio figure{margin:0}
.doc .duo img,.doc .trio img{aspect-ratio:3/4;object-fit:cover}
.doc .duo figure:only-child{grid-column:1/-1}
.doc .trio.sq img{aspect-ratio:1/1}
@media(max-width:599px){.doc .trio{grid-template-columns:1fr}.doc .trio img,.doc .trio.sq img{aspect-ratio:4/3}}
@media(min-width:600px){.doc .trio{grid-template-columns:repeat(3,1fr)}}