From 6da99241d2af5d08c03b85524e012d3b5777fb1d Mon Sep 17 00:00:00 2001
From: dsyoon <dosangyoon@gmail.com>
Date: Sat, 3 Jan 2026 17:05:20 +0900
Subject: [PATCH] Polish mobile hero slider

---
 css/ncue.css | 72 ++++++++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 70 insertions(+), 2 deletions(-)

diff --git a/css/ncue.css b/css/ncue.css
index efa2b11..5def12c 100644
--- a/css/ncue.css
+++ b/css/ncue.css
@@ -180,10 +180,11 @@ h1,h2,h3,h4{
   #featured #main-slider .slides img{ height: 360px; }
 }
 @media (max-width: 767px){
-  #featured #main-slider .slides img{ height: 300px; }
+  /* Give a bit more vertical room for the caption card */
+  #featured #main-slider .slides img{ height: 320px; }
 }
 @media (max-width: 480px){
-  #featured #main-slider .slides img{ height: 260px; }
+  #featured #main-slider .slides img{ height: 300px; }
 }
 
 #featured:before{
@@ -218,6 +219,73 @@ h1,h2,h3,h4{
   filter: saturate(1.02) contrast(1.02);
 }
 
+/* Slider polish on mobile: keep caption (template hides it), improve layout + navigation */
+@media (max-width: 767px){
+  /* Hide direction arrows (hover-based) and rely on swipe + dots */
+  #featured .flex-direction-nav{
+    display: none;
+  }
+
+  /* Make caption a clean bottom card */
+  #featured .flexslider .flex-caption{
+    display: block !important; /* override template's small-screen 'display:none' */
+    left: 12px !important;
+    right: 12px !important;
+    bottom: 34px !important;   /* reserve space for dots */
+    width: auto !important;
+    padding: 14px 14px 12px !important;
+    margin: 0 !important;
+    text-align: left;
+  }
+  #featured .flex-caption h3{
+    text-transform: none !important;
+    letter-spacing: -0.6px !important;
+    font-size: 18px;
+    line-height: 1.25;
+    margin: 0 0 8px;
+    word-break: keep-all;
+  }
+  #featured .flex-caption p{
+    font-size: 13px !important;
+    line-height: 1.6;
+    margin: 0 0 10px;
+    word-break: keep-all;
+  }
+  #featured .flex-caption .btn{
+    display: inline-block;
+    width: 100%;
+    padding: 12px 14px;
+    font-weight: 900;
+  }
+
+  /* Dots: keep visible and avoid overlapping the caption */
+  #featured .flex-control-nav{
+    bottom: 10px;
+    z-index: 4;
+  }
+  #featured .flex-control-paging li a{
+    width: 9px;
+    height: 9px;
+    background: rgba(255,255,255,0.45);
+    box-shadow: none;
+  }
+  #featured .flex-control-paging li a.flex-active{
+    background: rgba(255,255,255,0.92);
+  }
+}
+
+@media (max-width: 480px){
+  #featured .flexslider .flex-caption{
+    left: 10px !important;
+    right: 10px !important;
+    bottom: 32px !important;
+    padding: 12px 12px 10px !important;
+  }
+  #featured .flex-caption h3{
+    font-size: 17px;
+  }
+}
+
 /* CTA block (override template's `section.callaction { padding:50px 0 0 0; }`) */
 section.callaction{
   padding-top: 22px;