/* Buyer's guides (/guides, /guides/<slug>): additions to article.css – answer box, quotes with source, comparison tables, FAQ, hub cards. */

.guide .article-hero h1{max-width:22ch}
.guide-hub-intro{margin-top:24px;max-width:58ch;font-size:var(--text-lg);line-height:1.6;color:var(--ink)}

/* Direct answer first */
.guide-answer{margin:0 0 2.4em!important;padding:28px 32px;background:var(--surface);border-left:3px solid var(--original-navy,#073453);font-size:var(--text-lg)!important;line-height:1.6!important;color:var(--ink)}
.guide-answer-label{display:block;font-size:var(--text-xs);font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}

/* Quotes from Dan with the video as source */
.guide-quote{margin:40px 0}
.guide-quote blockquote{margin:0;border-left:2px solid var(--original-navy,#073453);padding-left:24px}
.guide-quote blockquote p{margin:0;font-family:var(--font-display);font-size:var(--text-lg);line-height:1.5;color:var(--ink)}
.guide-quote figcaption{margin:14px 0 0 26px;font-size:var(--text-sm);color:var(--muted);line-height:1.5}
.guide-quote figcaption a{color:var(--original-navy,#073453);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}

/* Comparison tables: full page width on desktop, scroll on small screens */
.guide-table-wrap{margin:32px 0 48px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.article-body .guide-table-wrap{max-width:none;width:min(1280px,calc(100vw - 112px))}
.guide-table{width:100%;border-collapse:collapse;font-size:var(--text-sm);line-height:1.55}
.guide-table caption{text-align:left;font-size:var(--text-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.guide-table th,.guide-table td{padding:14px 16px;border-bottom:1px solid var(--border);vertical-align:top;text-align:left}
.guide-table thead th{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:var(--text-sm);border-bottom:2px solid var(--original-navy,#073453);color:var(--ink)}
.guide-table tbody th{font-weight:500;color:var(--muted);white-space:nowrap}
.guide-table td{min-width:150px}
.guide-table tbody tr:nth-child(even){background:var(--surface)}

/* Model rows inside the body break out to the full width */
.article-body .related-models{max-width:none;width:min(1280px,calc(100vw - 112px));padding-block:32px 8px}
.article-body .related-models .wrap{width:100%}

/* FAQ */
.guide-faq{margin-top:56px;border-top:1px solid var(--border);padding-top:8px}
.guide-faq-item{border-bottom:1px solid var(--border)}
.guide-faq-item summary{cursor:pointer;list-style:none;padding:20px 40px 20px 0;position:relative;font-weight:500;font-size:var(--text-base);line-height:1.5}
.guide-faq-item summary::-webkit-details-marker{display:none}
.guide-faq-item summary::after{content:"+";position:absolute;right:4px;top:16px;font-family:var(--font-display);font-size:1.5rem;line-height:1;color:var(--original-navy,#073453);transition:transform .2s}
.guide-faq-item[open] summary::after{transform:rotate(45deg)}
.guide-faq-item p{margin:0 0 24px;line-height:1.7;max-width:62ch}

.guide-attribution{margin-top:40px!important;font-size:var(--text-sm)!important;color:var(--muted);line-height:1.6!important}

/* Other guides */
.guide-more{padding-block:40px 8px}
.guide-more .eyebrow{color:var(--muted);margin-bottom:24px}
.guide-more ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.guide-more-link{display:flex;flex-direction:column;gap:12px;padding:28px 32px;border:1px solid var(--border);background:var(--surface);color:inherit;text-decoration:none;transition:border-color .2s;height:100%}
.guide-more-link:hover{border-color:var(--original-navy,#073453)}
.guide-more-eyebrow{font-size:var(--text-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.guide-more-title{font-family:var(--font-display);font-size:var(--text-xl);line-height:1.25;color:var(--ink)}
.guide-more-link .text-link{margin-top:auto;align-self:flex-start}

/* Hub */
.guide-hub{padding-block:24px 72px}
.guide-hub-list{list-style:none;margin:0;padding:0;display:grid;gap:32px}
.guide-card{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);border:1px solid var(--border);background:var(--surface);color:inherit;text-decoration:none;transition:border-color .2s;min-height:300px}
.guide-card:hover{border-color:var(--original-navy,#073453)}
.guide-card-image{display:block;position:relative;overflow:hidden;background:var(--navy);min-height:100%}
.guide-card-image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s}
.guide-card:hover .guide-card-image img{transform:scale(1.03)}
.guide-card-copy{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:14px;padding:36px clamp(24px,3vw,48px);min-width:0}
.guide-card-copy .eyebrow{color:var(--muted)}
.guide-card-title{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.03em;font-size:clamp(1.3rem,2vw,1.9rem);line-height:1.12;color:var(--ink);overflow-wrap:break-word}
.guide-card-summary{line-height:1.6;max-width:56ch;color:var(--ink)}
.guide-card-copy .text-link{margin-top:6px}

@media (max-width:1150px){
  .article-body .guide-table-wrap,.article-body .related-models{width:calc(100vw - 64px)}
}
@media (max-width:900px){
  .guide-more ul{grid-template-columns:1fr}
  .guide-card{grid-template-columns:1fr;min-height:0}
  .guide-card-image{min-height:0;aspect-ratio:16/9}
  .guide-card-copy{padding:24px 28px 28px}
  .guide-answer{padding:22px 24px}
}
@media (max-width:600px){
  .article-body .guide-table-wrap,.article-body .related-models{width:calc(100vw - 40px)}
  .guide-table th,.guide-table td{padding:12px 12px}
  .guide-quote blockquote{padding-left:18px}
  .guide-quote figcaption{margin-left:20px}
  .guide-more-link{padding:22px 24px}
}

.guide-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.article-body .related-tiles{padding-left:0;margin:0}.article-body .related-tiles li{margin:0;padding:0}

/* Guide heroes: taller than article heroes so the whole boat stays in frame; 3:2 (no crop) on phones (Mark, 28 Sep 2026). */
.guide .article-hero-image{height:clamp(420px,min(calc(100vw / 1.9),78vh),880px)}
@media (max-width:900px){.guide .article-hero-image{height:auto;min-height:0;aspect-ratio:16/10}}
@media (max-width:600px){.guide .article-hero-image{height:auto;min-height:0;aspect-ratio:3/2}}