/**
 * v3 — single article.
 *
 * The article layout from guide-how-to-choose-a-nile-cruise-ship.html: the
 * two-column .art grid, the .prose body and everything an article can contain
 * (key takeaways, figures, callouts, comparison tables, the quote box), plus
 * the sticky sidebar with its table of contents and author card.
 *
 * .prose is deliberately broad — it styles the raw h2/h3/p/ul/table the editor
 * produces, so a post written in the block editor comes out looking designed
 * without the author having to reach for a class.
 */

.posts{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
@media(max-width:960px){
  .posts{grid-template-columns:1fr 1fr;}
}
@media(max-width:640px){
  .posts{grid-template-columns:1fr;}
}
.post{background:#fff; border:1.5px solid var(--line); border-radius:var(--r); overflow:hidden; display:flex; flex-direction:column; transition:transform .25s, box-shadow .25s;}
.post:hover{transform:translateY(-4px); box-shadow:var(--shadow);}
.post:hover .ph{transform:scale(1.04);}
.post.hide{display:none;}
.p-img{position:relative; height:180px; overflow:hidden; display:block;}
.p-img .cat{position:absolute; z-index:2; top:12px; inset-inline-start:12px; background:#fff; color:var(--petrol-dark); font-size:.66rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:5px 10px; border-radius:99px;}
.p-body{padding:16px 18px 18px; display:flex; flex-direction:column; gap:8px; flex:1;}
.p-meta{display:flex; gap:10px; font-size:.72rem; font-weight:700; color:var(--muted);}
.p-meta span{display:inline-flex; align-items:center; gap:4px;}
.p-meta .ico{width:12px; height:12px; color:var(--teal);}
.post h3{font-size:1.05rem;}
.post h3 a:hover{color:var(--petrol);}
.post p{font-size:.86rem; color:var(--ink-soft);}
.p-foot{margin-top:auto; padding-top:10px; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between;}
.p-foot a{font-weight:800; font-size:.84rem; color:var(--petrol); display:inline-flex; align-items:center; gap:5px;}
.p-foot a:hover{color:var(--orange);}
.p-foot a .ico{width:14px; height:14px;}
.p-foot small{font-size:.72rem; color:var(--muted); font-weight:600;}
.fp-body .kicker{color:#F4CD79;}
.fp-body .kicker::before{background:#F4CD79;}
.fp-body .p-meta{color:#9FB9C2;}
.fp-body .p-meta .ico{color:#F4CD79;}
.fp-body .btn{align-self:flex-start; margin-top:6px;}
.qa .ico{width:18px; height:18px; color:var(--petrol); background:var(--petrol-soft); padding:8px; box-sizing:content-box; border-radius:10px; flex:none;}
.art-hero h1{font-size:clamp(1.6rem,2.6vw,2.6rem); max-width:35ch;}
.art-meta{display:flex; gap:14px; flex-wrap:wrap; margin-top:14px; font-size:.8rem; font-weight:700; color:var(--ink-soft);}
.art-meta span{display:inline-flex; align-items:center; gap:6px;}
.art-meta .ico{width:14px; height:14px; color:var(--teal);}
.art-meta .av{width:28px; height:28px; border-radius:50%; background:var(--petrol); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:.66rem; font-weight:800;}
.art{display:grid; grid-template-columns:1fr 320px; gap:44px; align-items:start;}
@media(max-width:1000px){
  .art{grid-template-columns:1fr;}
}
.prose{max-width:72ch; min-width:0;}
.prose>p{font-size:1.02rem; color:var(--ink-soft); line-height:1.75; margin-bottom:16px;}
.prose>p.lead{font-size:1.12rem; color:var(--ink); font-weight:500;}
.prose h2{font-size:1.5rem; margin:34px 0 12px; scroll-margin-top:96px;}
.prose h3{font-size:1.12rem; margin:22px 0 8px; scroll-margin-top:96px;}
.prose ul,.prose ol{color:var(--ink-soft); font-size:1rem; line-height:1.7; padding-inline-start:22px; margin:0 0 16px;}
.prose li{margin-bottom:6px;}
.prose li b{color:var(--ink);}
/* Links in the running text. Scoped away from the buttons and the author
   card, which live inside .prose but are not prose — underlining a button
   label and every line of a byline is what this rule did before. */
.prose a:not(.btn):not(.author):not(.author a){color:var(--petrol); font-weight:700; text-decoration:underline; text-decoration-color:var(--petrol-tint); text-underline-offset:3px;}
.prose a:not(.btn):not(.author):not(.author a):hover{color:var(--orange);}
.takeaways{background:var(--petrol-soft); border:1.5px solid var(--petrol-tint); border-radius:16px; padding:20px 22px; margin:0 0 22px;}
.takeaways h2,.takeaways h3{font-size:.74rem; text-transform:uppercase; letter-spacing:.1em; color:var(--petrol-dark); margin:0 0 10px; display:flex; gap:8px; align-items:center;}
.takeaways h2 .ico,.takeaways h3 .ico{width:16px; height:16px;}
.takeaways ul{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px;}
.takeaways li{display:flex; gap:10px; font-size:.95rem; color:var(--ink);}
.takeaways li .ico{width:16px; height:16px; color:var(--teal); flex:none; margin-top:4px;}
.fig{margin:22px 0; border-radius:var(--r); overflow:hidden; border:1.5px solid var(--line); background:#fff;}
.fig .fi{position:relative; height:320px; overflow:hidden;}
.fig figcaption{padding:10px 16px; font-size:.8rem; color:var(--muted); font-weight:600;}
.callout{display:flex; gap:14px; align-items:flex-start; background:var(--gold-soft); border:1px solid #F1DFB2; border-radius:14px; padding:16px 18px; margin:22px 0; font-size:.95rem; color:var(--ink-soft);}
.callout .ico{width:20px; height:20px; color:var(--gold-dark); flex:none; margin-top:2px;}
.callout b{color:var(--ink);}
.callout.tip{background:var(--teal-soft); border-color:#C6E6E6;}
.callout.tip .ico{color:var(--teal);}
.prose .cmp{margin:18px 0 24px;}
.prose .cmp table{min-width:560px; font-size:.86rem;}
.qbox{background:var(--petrol-deep); color:#fff; border-radius:18px; padding:24px; margin:26px 0;}
.qbox h3{color:#fff; font-size:1.15rem; margin:0 0 6px;}
.qbox p{color:#CFE1E7; font-size:.92rem; margin-bottom:14px;}
.qbox .btn{margin-inline-end:8px;}
/* The mockup's second button on this card is an outline on the dark panel.
   base.css has no .btn-outline, so it is defined here where it is used. */
.qbox .btn-outline{background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.4);}
.qbox .btn-outline:hover{background:rgba(255,255,255,.12); border-color:#fff;}
.side{position:sticky; top:96px; display:flex; flex-direction:column; gap:14px;}
@media(max-width:1000px){
  .side{position:static;}
  .toc{display:none;}
}
.toc{background:#fff; border:1.5px solid var(--line); border-radius:16px; padding:16px 18px;}
/* Was .toc h4. font-weight and line-height are stated here because they used to
   come from the global h1,h2,h3,h4 rule, which a <p> does not match; margin is
   fully specified because a <p> has a default top margin an <h4> did not. */
.toc .toc-h{font-size:.7rem; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); font-weight:800; line-height:1.15; margin:0 0 8px;}
.toc a{display:block; padding:7px 10px; border-radius:8px; font-size:.86rem; font-weight:600; color:var(--ink-soft); border-inline-start:2px solid transparent; transition:all .15s;}
.toc a.sub{padding-inline-start:22px; font-size:.8rem;}
.toc a:hover,.toc a.on{color:var(--petrol); background:var(--petrol-soft); border-color:var(--petrol);}
/* The author card. It used to sit in the sidebar as a 44px chip; it now runs
   under the guide it belongs to, at a size where the byline is actually read,
   and the whole card is a link to everything else that person has written. */
.author{display:flex; gap:18px; align-items:flex-start; background:var(--petrol-deep); color:#fff; border-radius:18px; padding:24px; margin:26px 0 0;}
@media(max-width:560px){ .author{flex-direction:column; gap:14px;} }
.author .av{width:84px; height:84px; border-radius:50%; background:var(--petrol); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-weight:800; font-size:1.5rem; flex:none; overflow:hidden;}
.author .av img{width:100%; height:100%; object-fit:cover; border-radius:50%;}
.author .au-label{display:block; font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.09em; color:var(--gold); margin-bottom:4px;}
.author b{display:block; font-size:1.15rem; margin-bottom:2px;}
.author b a{color:#fff; text-decoration:none; font-weight:inherit;}
.author b a:hover{text-decoration:underline; text-underline-offset:3px;}
.author .au-count{display:block; font-size:.82rem; color:#9FC2CC; font-weight:600; margin-bottom:10px;}
.author small{display:block; font-size:.88rem; color:#CFE1E7; font-weight:500; line-height:1.65;}
.author .au-more{display:inline-block; margin-top:12px; font-size:.86rem; font-weight:800; color:var(--gold); text-decoration:none;}
.author .au-more:hover{text-decoration:underline; text-underline-offset:3px;}

/* The byline at the top of the guide also points at the author's page. */
.art-meta a{color:inherit; text-decoration:none;}
.art-meta a:hover{text-decoration:underline; text-underline-offset:3px;}
.share{display:flex; gap:8px; align-items:center; margin-top:26px; padding-top:18px; border-top:1px solid var(--line); font-size:.82rem; font-weight:700; color:var(--muted);}
.share a{width:38px; height:38px; border-radius:50%; border:1.5px solid var(--line); display:inline-flex; align-items:center; justify-content:center; color:var(--petrol);}
.share a:hover{background:var(--petrol-soft); border-color:var(--petrol);}
.share .ico{width:16px; height:16px;}
.cmp{overflow-x:auto; border:1.5px solid var(--line); border-radius:var(--r); background:#fff;}
.cmp table{width:100%; border-collapse:collapse; min-width:720px; font-size:.88rem;}
.cmp th{background:var(--petrol); color:#fff; text-align:start; padding:14px 16px; font-size:.7rem; text-transform:uppercase; letter-spacing:.08em;}
.cmp th:first-child{width:160px;}
.cmp td{padding:13px 16px; border-top:1px solid var(--line); color:var(--ink-soft); vertical-align:top;}
.cmp td:first-child{font-weight:800; color:var(--ink); background:var(--bg-alt);}
.cmp tr:hover td{background:var(--bg-alt);}
.cmp td b{color:var(--petrol);}
.cmp .hot{display:inline-block; background:var(--orange-soft); color:var(--orange-dark); font-size:.68rem; font-weight:800; padding:2px 8px; border-radius:99px; margin-inline-start:6px;}

/* Tables inside a post. The mockup's article wraps a comparison table in .cmp;
   the guides here wrap theirs in .alc-tbl, a leftover from the old theme that
   carried no styling at all — which left a five-column table with no way to
   scroll and nothing holding it inside the column on a narrow screen. It now
   gets the mockup's .cmp treatment, scrolling included. A table the editor
   inserts loose still has no class, so .prose styles that too. */
.prose .alc-tbl{overflow-x:auto; border:1.5px solid var(--line); border-radius:var(--r); background:#fff; margin:18px 0 24px;}
.prose .alc-tbl table{width:100%; border-collapse:collapse; min-width:560px; font-size:.88rem; margin:0; border:none; border-radius:0;}
.prose .alc-tbl th{background:var(--petrol); color:#fff; text-align:start; padding:14px 16px; font-size:.7rem; text-transform:uppercase; letter-spacing:.08em;}
/* No fixed width on the label column: at 160px "Domestic flights within Egypt"
   broke over three lines while the cell beside it held the word "Yes" and 500px
   of nothing. Auto layout sizes each column to what is actually in it; the
   minimum only stops a one-word column from collapsing. */
.prose .alc-tbl th:first-child,
.prose .alc-tbl td:first-child{min-width:170px;}
/* A short value — Yes, No, $890, 7 days — should not be handed the rest of the
   row, so those columns shrink to their content and the text column takes the
   slack. */
.prose .alc-tbl td{white-space:normal;}
.prose .alc-tbl th:not(:first-child):not(:last-child),
.prose .alc-tbl td:not(:first-child):not(:last-child){width:1%; white-space:nowrap;}
.prose .alc-tbl td{padding:13px 16px; border-top:1px solid var(--line); color:var(--ink-soft); vertical-align:top;}
.prose .alc-tbl td:first-child{font-weight:800; color:var(--ink); background:var(--bg-alt);}
.prose .alc-tbl td b{color:var(--petrol);}
/* A two-column table has no "middle" column, so the rule above never reaches its
   value column. :nth-child(2):last-child is true only when the second cell is
   also the final one — i.e. exactly two columns — which is the Item / Yes-No
   shape the guides use. */
.prose .alc-tbl th:nth-child(2):last-child,
.prose .alc-tbl td:nth-child(2):last-child{width:1%; white-space:nowrap;}

.prose table{width:100%; border-collapse:collapse; font-size:.88rem; margin:0 0 18px; border:1.5px solid var(--line); border-radius:12px; overflow:hidden;}
.prose th{background:var(--bg-alt); text-align:start; padding:10px 12px; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted);}
.prose td{padding:10px 12px; border-top:1px solid var(--line); color:var(--ink-soft);}
.prose figure{margin:22px 0;}
.prose figure img{border-radius:var(--r);}
.prose figcaption{padding:8px 2px 0; font-size:.8rem; color:var(--muted); font-weight:600;}
.prose blockquote{border-inline-start:3px solid var(--petrol-tint); padding:2px 0 2px 16px; margin:18px 0; color:var(--ink); font-size:1.02rem;}