/* cms2 shaper/rider detail */
.cms2-tdetail { padding: clamp(32px, 5vw, 64px) 20px; background: #fff; }
.cms2-tdetail-in { max-width: 1280px; margin: 0 auto; }
.cms2-tdetail-top { display: flex; gap: clamp(28px, 5vw, 64px); align-items: flex-start; }
.cms2-tdetail-photo { flex: 0 0 38%; }
.cms2-tdetail-photo img { width: 100%; border-radius: 12px; object-fit: cover; }
.cms2-tdetail-copy { flex: 1; display: flex; flex-direction: column; gap: 14px; }
.cms2-tdetail-role { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #888; }
.cms2-tdetail-name { margin: 0; font-size: clamp(34px, 5vw, 60px); font-weight: 800; text-transform: uppercase; line-height: 1; }
.cms2-tdetail-logo { height: 46px; width: auto; object-fit: contain; align-self: flex-start; }
.cms2-tdetail-facts { margin: 6px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 24px; }
.cms2-tdetail-facts div { border-left: 3px solid #111; padding-left: 12px; }
.cms2-tdetail-facts dt { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #888; }
.cms2-tdetail-facts dd { margin: 2px 0 0; font-size: 14px; font-weight: 600; }
.cms2-tdetail-socials { display: flex; gap: 14px; flex-wrap: wrap; margin: 4px 0 0; }
.cms2-tdetail-socials a {
    font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    text-decoration: none; color: #111; border-bottom: 2px solid #111; padding-bottom: 2px;
}
.cms2-tdetail-socials a:hover { opacity: .6; }
.cms2-tdetail-bio { max-width: 820px; margin-top: clamp(24px, 4vw, 44px); font-size: 15px; line-height: 1.75; color: #333; }
.cms2-tdetail-bio p { margin: 0 0 12px; }
.cms2-tdetail-boards { margin-top: clamp(32px, 5vw, 56px); }
.cms2-tdetail-boards h2, .cms2-tdetail-gallery h2 {
    margin: 0 0 20px; font-size: clamp(22px, 3vw, 32px); font-weight: 800; text-transform: uppercase;
}
.cms2-tdetail-boards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 18px; }
.cms2-tdetail-board { display: flex; flex-direction: column; gap: 4px; text-align: center; text-decoration: none; color: inherit; }
.cms2-tdetail-board-img { aspect-ratio: 3/4; background: #f7f7f6; border-radius: 8px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.cms2-tdetail-board-img img { width: 100%; height: 100%; object-fit: contain; transition: transform .25s; }
a.cms2-tdetail-board:hover .cms2-tdetail-board-img img { transform: scale(1.05); }
.cms2-tdetail-board strong { font-size: 14px; text-transform: uppercase; }
.cms2-tdetail-board-dims { font-size: 12px; color: #888; }
.cms2-tdetail-gallery { margin-top: clamp(32px, 5vw, 56px); }
.cms2-tdetail-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.cms2-tdetail-gallery-grid .cms2-gallery-item { aspect-ratio: 4/3; border-radius: 8px; }
@media (max-width: 820px) {
    .cms2-tdetail-top { flex-direction: column; }
    .cms2-tdetail-photo { flex-basis: auto; width: 100%; }
}

.cms2-notfound { font-size: 16px; color: #888; text-align: center; padding: 60px 0; }

/* layout B — thebasesurf shaper detail style */
.cms2-tdb-top { display: flex; gap: clamp(28px, 5vw, 72px); align-items: flex-start; }
.cms2-tdb-left { flex: 1.05; display: flex; flex-direction: column; gap: 16px; }
.cms2-tdb-name { margin: 0; font-size: clamp(34px, 5vw, 58px); font-weight: 800; text-transform: uppercase; line-height: 1; }
.cms2-tdb-brandrow { display: flex; align-items: center; gap: 12px; }
.cms2-tdb-logo img { height: 52px; width: auto; object-fit: contain; }
.cms2-tdb-brandname { font-size: 15px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #666; }
.cms2-tdb-text { font-size: 15px; line-height: 1.75; color: #333; }
.cms2-tdb-text p { margin: 0 0 12px; }
.cms2-tdb-cta { margin: 6px 0 0; }
.cms2-tdb-right { flex: 1; }
.cms2-tdb-right img { width: 100%; border-radius: 12px; object-fit: cover; }
.cms2-tdb-video { margin-top: clamp(32px, 5vw, 56px); aspect-ratio: 16/9; border-radius: 12px; overflow: hidden; }
.cms2-tdb-video iframe { width: 100%; height: 100%; display: block; border: 0; }
@media (max-width: 820px) {
    .cms2-tdb-top { flex-direction: column-reverse; }
}