/* Additive reel section; all styling stays inside the existing Nadi Teera theme. */
#reels { scroll-margin-top: 105px; padding: 24px; }
#reels .section-heading p { max-width: 620px; }
#reels .reels-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); gap: 28px; align-items: center; }
#reels .reel-feature { min-width: 0; overflow: hidden; border-radius: 22px; }
#reels .reel-stage { display: grid; place-items: center; padding: 22px; background: linear-gradient(125deg,rgba(32,43,28,.65),rgba(76,52,16,.4)),url('images/2026/major-12-960.webp') center/cover; }
#reels .reel-screen { position: relative; width: min(100%,285px); aspect-ratio: 9/16; border: 1px solid rgba(255,240,190,.6); border-radius: 15px; overflow: hidden; background: #17231b; box-shadow: 0 16px 34px rgba(15,24,14,.25); }
#reels video { display: block; width: 100%; height: 100%; object-fit: contain; }
#reels .reel-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); padding: 13px 20px; display: flex; gap: 10px; align-items: center; border-radius: 30px; white-space: nowrap; font: 700 13px 'Manrope',sans-serif; cursor: pointer; }
#reels .reel-play[hidden] { display: none !important; }
#reels .reel-play { color: #48300f !important; text-shadow: none !important; }
#reels .reel-caption { padding: 20px; text-align: center; }
#reels .reel-caption > span { font-size: 11px; color: #967228; letter-spacing: .1em; }
#reels .reel-caption h3 { font-size: 17px; line-height: 1.4; margin: 6px 0 10px; }
#reels .reel-caption a { font-size: 12px; color: #806019; text-underline-offset: 4px; }
#reels #reelStatus { font-size: 12px; line-height: 1.6; margin-top: 8px; }
#reels #reelStatus:empty { display: none; }
#reels .reel-browse > h3 { font-size: 23px; margin: 0 0 10px; }
#reels .reel-browse > p { margin: 0 auto 22px; max-width: 400px; font-size: 13px; line-height: 1.65; color: #7a6850; }
#reels .reel-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
#reels button.reel-choice { display: flex; align-items: center; gap: 12px; padding: 10px; min-width: 0; text-align: left; border-radius: 15px; background: linear-gradient(135deg,rgba(255,251,239,.9),rgba(255,226,157,.24)) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.7),0 6px 15px rgba(105,77,21,.08) !important; font-family: 'Manrope',sans-serif; cursor: pointer; }
#reels button.reel-choice[aria-pressed=true] { border-color: #b78620 !important; background: linear-gradient(135deg,#ffefc2,rgba(225,184,90,.42)) !important; box-shadow: inset 0 0 0 1px #bc8c2a,0 6px 15px rgba(105,77,21,.1) !important; }
#reels .reel-choice > img { flex: none; width: 70px; height: 108px; object-fit: cover; border-radius: 9px; }
#reels .reel-choice > span { min-width: 0; }
#reels .reel-choice small { display: block; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: #947129; }
#reels .reel-choice strong { display: block; font-size: 12px; line-height: 1.5; margin: 8px 0; color: #493618; }
#reels .reel-choice-action { font-size: 11px; font-weight: 600; color: #88601b; }
#reels button:focus-visible { outline: 3px solid #9f711d; outline-offset: 4px; }
@media (max-width: 1050px) {
 #reels .reels-layout { grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: 20px; }
 #reels .reel-list { grid-template-columns: 1fr; gap: 8px; }
 #reels .reel-choice > img { width: 45px; height: 66px; }
 #reels .reel-choice strong { margin: 4px 0; }
 #reels .reel-choice-action { display: none; }
}
@media (max-width: 640px) {
 #reels { padding: 14px; }
 body.reel-in-view .floating-contact { visibility: hidden; pointer-events: none; }
 #reels .reels-layout { grid-template-columns: 1fr; gap: 26px; }
 #reels .reel-stage { padding: 16px; }
 #reels .reel-screen { width: min(100%,285px); }
 #reels .reel-list { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
 #reels button.reel-choice { flex-direction: column; align-items: stretch; gap: 8px; padding: 8px; text-align: center; }
 #reels .reel-choice > img { width: 100%; height: 150px; object-position: center; }
 #reels .reel-choice strong { font-size: 11px; }
 #reels .section-heading .btn { max-width: 100%; white-space: normal; }
}