/* Proclassic Tyre Guides (/tyre-guides/) - article layout on top of style.css. Added 25 Oct 2026. */
.phero--guide,body.qbar-on .phero--guide{min-height:0;padding:72px 0 76px;align-items:flex-end}
.phero--guide h1{font-size:clamp(32px,4.2vw,58px);line-height:1.08}
.phero--guide .phero__copy{max-width:780px}
.phero--guide .phero__sub{margin-bottom:14px}
.gmeta{color:#b9b9b9;font-size:14px;margin:0 0 26px}

.gsec{padding:clamp(44px,6vw,80px) 0 clamp(56px,7vw,96px);background:var(--black)}
.gwrap{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:clamp(32px,5vw,72px);align-items:start}

.prose{max-width:780px;font-size:17.5px;line-height:1.7;color:#e4e4e4}
.prose h2{font-size:clamp(24px,2.5vw,32px);margin:46px 0 14px;color:#fff;line-height:1.2}
.prose h3{font-size:20px;margin:28px 0 10px;color:#fff}
.prose p{margin:0 0 18px}
.prose a{color:#fff;text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:2px;text-underline-offset:3px}
.prose a:hover{color:#ffb4a3}
.prose a.btn{text-decoration:none;color:#fff}
.prose ul,.prose ol{padding-left:22px;margin:0 0 22px}
.prose li{margin-bottom:9px}
.prose li::marker{color:var(--red)}
.prose strong{color:#fff}

.qa{border-left:4px solid var(--red);background:#111;padding:20px 24px;border-radius:0 10px 10px 0;margin:0 0 30px}
.qa p{margin:0;font-size:17px;color:#f0f0f0}
.qa .qa__label{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--red);font-weight:800;margin:0 0 6px}

.tbl{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:6px 0 26px;border:1px solid #262626;border-radius:10px}
.tbl table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.5}
.tbl th,.tbl td{padding:12px 14px;text-align:left;border-bottom:1px solid #222;vertical-align:top}
.tbl th{background:#151515;color:#fff;font-weight:700;white-space:nowrap}
.tbl td{color:#d6d6d6}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr:nth-child(even) td{background:#0b0b0b}

.note{background:#0e0e0e;border:1px solid #262626;border-radius:10px;padding:16px 20px;font-size:16px;color:#e0e0e0}

.gcta{margin:48px 0 0;padding:clamp(22px,3vw,34px);border:1px solid #4a1a0b;background:linear-gradient(135deg,#1a0a06 0%,#0c0c0c 70%);border-radius:14px}
.prose .gcta h2{margin-top:0}
.gcta__list{margin-bottom:24px}
.gcta__alt{margin:16px 0 0!important;font-size:15px;color:#bdbdbd}

.gside{position:sticky;top:180px;display:grid;gap:16px}
body.qbar-on .gside{top:180px}
.gcard{border:1px solid #262626;border-radius:12px;padding:22px;background:#0e0e0e}
.gcard h3{font-size:19px;margin-bottom:12px}
.gcard ul{list-style:none;padding:0;margin:0 0 18px;color:#d0d0d0;font-size:15px}
.gcard li{padding:8px 0 8px 22px;border-bottom:1px solid #1d1d1d;position:relative}
.gcard li::before{content:"";position:absolute;left:2px;top:15px;width:8px;height:8px;border-radius:50%;background:var(--red)}
.gcard .btn{display:block;text-align:center;padding:14px 18px}
.gcard__note{margin:14px 0 0;font-size:13px;color:#9d9d9d}
.glinks a{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid #1d1d1d;color:#ddd;text-decoration:none;font-size:15px;font-weight:600}
.glinks a::after{content:"\2192";color:var(--red)}
.glinks a:hover{color:#fff}
.glinks a:last-child{border-bottom:0}

/* Hub */
.gtiles__title{font-size:clamp(22px,2.4vw,30px);margin:8px 0 18px}
.gtiles{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:48px}
.gtile{display:flex;flex-direction:column;border:1px solid #262626;border-radius:12px;overflow:hidden;background:#0e0e0e;text-decoration:none;transition:border-color .2s,transform .2s}
.gtile:hover{border-color:var(--red);transform:translateY(-2px)}
.gtile img{width:100%;aspect-ratio:16/9;object-fit:cover}
.gtile__body{display:flex;flex-direction:column;gap:8px;padding:18px 20px 20px;flex:1}
.gtile__kw{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--red);font-weight:800}
.gtile strong{font-size:18px;line-height:1.3}
.gtile__desc{color:#bdbdbd;font-size:14.5px;flex:1}

@media (max-width:1100px){.gtiles{grid-template-columns:repeat(2,1fr)}}
@media (max-width:1000px){.gwrap{grid-template-columns:minmax(0,1fr)}.gside{position:static}}
@media (max-width:767px){
  .phero--guide{padding:40px 0 48px}
  .prose{font-size:16.5px}
  .tbl table{font-size:14px}
  .tbl th,.tbl td{padding:10px 11px}
  .tbl th{white-space:normal}
  .gtiles{grid-template-columns:1fr}
}