/* =====================================================================
   ClimbUp Career - Custom styles for dynamic components
   (Hero slider, Instagram stories, Blog, Gallery, Custom sections, Share)
   Matches HeroBiz template ( --accent-color: #0ea2bd )
   ===================================================================== */

/* ---------- HERO SLIDER ---------- */
.hero-slider { position: relative; width: 100%; }
.hero-slider .swiper-slide {
  min-height: 88vh;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
  position: relative;
}
.hero-slide-inner {
  position: relative;
  z-index: 3;
  width: 100%;
  padding: 60px 0;
}
.hero-slider .slide-img { max-width: 460px; width: 100%; margin: 0 auto 25px; display: block; }
.hero-slider h2 { font-size: 3rem; font-weight: 700; color: var(--heading-color); margin-bottom: .4rem; }
.hero-slider h2 span { color: var(--accent-color); }
.hero-slider .subtitle { font-size: 1.1rem; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--accent-color); margin-bottom: 1rem; }
.hero-slider p { font-size: 1.15rem; max-width: 680px; margin: 0 auto 1.8rem; color: var(--default-color); }
.hero-slider .hero-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.hero-slider .btn-1, .hero-slider .btn-2 {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 32px; border-radius: 50px; font-weight: 600; transition: .3s;
}
.hero-slider .btn-1 { background: var(--accent-color); color: #fff; }
.hero-slider .btn-1:hover { background: color-mix(in srgb, var(--accent-color), #000 12%); }
.hero-slider .btn-2 { background: transparent; color: var(--heading-color); border: 2px solid color-mix(in srgb, var(--heading-color), transparent 70%); }
.hero-slider .btn-2:hover { border-color: var(--accent-color); color: var(--accent-color); }
.hero-slider .swiper-pagination-bullet-active { background: var(--accent-color); }
.hero-slider .swiper-button-next, .hero-slider .swiper-button-prev { color: var(--accent-color); }

/* ---------- INSTAGRAM STORIES ---------- */
.insta-stories { padding: 35px 0 10px; }
.insta-stories .story-track {
  display: flex; gap: 18px; overflow-x: auto; padding: 10px 4px 18px;
  scrollbar-width: thin;
}
.insta-stories .story-track::-webkit-scrollbar { height: 6px; }
.insta-stories .story-track::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--accent-color), transparent 50%); border-radius: 10px; }
.insta-story { flex: 0 0 auto; text-align: center; width: 92px; cursor: pointer; }
.insta-story .ring {
  width: 84px; height: 84px; border-radius: 50%; padding: 3px;
  background: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);
  margin: 0 auto;
}
.insta-story .ring img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; border: 3px solid #fff; }
.insta-story span { display: block; font-size: .78rem; margin-top: 6px; color: var(--default-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- BLOG ---------- */
.blog-section { padding: 80px 0; }
.blog-card {
  background: var(--surface-color); border-radius: 16px; overflow: hidden;
  box-shadow: 0 8px 28px rgba(0,0,0,.07); height: 100%; transition: .3s; display: flex; flex-direction: column;
}
.blog-card:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(0,0,0,.12); }
.blog-card .thumb { height: 210px; overflow: hidden; }
.blog-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: .4s; }
.blog-card:hover .thumb img { transform: scale(1.06); }
.blog-card .body { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.blog-card .cat { font-size: .72rem; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; color: var(--accent-color); }
.blog-card h3 { font-size: 1.18rem; margin: 8px 0; font-weight: 700; line-height: 1.4; }
.blog-card h3 a { color: var(--heading-color); }
.blog-card h3 a:hover { color: var(--accent-color); }
.blog-card .meta { font-size: .8rem; color: #8a949e; margin-bottom: 10px; }
.blog-card p { color: var(--default-color); font-size: .94rem; flex: 1; }
.blog-card .read-more { color: var(--accent-color); font-weight: 600; margin-top: 12px; display: inline-flex; align-items: center; gap: 6px; }

/* Single blog */
.blog-single { padding: 60px 0; }
.blog-single .post-title { font-size: 2.3rem; font-weight: 700; color: var(--heading-color); }
.blog-single .post-meta { color: #8a949e; margin: 12px 0 24px; }
.blog-single .post-meta span { margin-right: 18px; }
.blog-single .cover { width: 100%; border-radius: 16px; margin-bottom: 28px; max-height: 460px; object-fit: cover; }
.blog-single .content { font-size: 1.05rem; line-height: 1.85; color: var(--default-color); }
.blog-single .content img { max-width: 100%; border-radius: 12px; margin: 18px 0; }
.blog-gallery { display: grid; grid-template-columns: repeat(auto-fill,minmax(160px,1fr)); gap: 12px; margin: 30px 0; }
.blog-gallery a img { width: 100%; height: 150px; object-fit: cover; border-radius: 10px; transition: .3s; }
.blog-gallery a img:hover { transform: scale(1.03); }

/* Social share */
.share-box { margin: 35px 0; padding: 20px; border-radius: 14px; background: color-mix(in srgb, var(--accent-color), transparent 92%); }
.share-box h5 { font-weight: 700; margin-bottom: 14px; color: var(--heading-color); }
.share-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.share-buttons a {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 50px;
  color: #fff; font-size: .88rem; font-weight: 600; transition: .25s;
}
.share-buttons a:hover { transform: translateY(-2px); color: #fff; opacity: .92; }
.share-buttons .s-fb { background: #1877f2; }
.share-buttons .s-tw { background: #000; }
.share-buttons .s-wa { background: #25d366; }
.share-buttons .s-li { background: #0a66c2; }
.share-buttons .s-tg { background: #229ed9; }
.share-buttons .s-cp { background: #6c757d; }

/* ---------- CUSTOM SECTIONS ---------- */
.custom-section { padding: 80px 0; }
.custom-section.bg-dark-cs { background: #3a4753; color: #fff; }
.custom-section.bg-dark-cs h2, .custom-section.bg-dark-cs p { color: #fff; }
.custom-section .cs-img { width: 100%; border-radius: 16px; box-shadow: 0 14px 40px rgba(0,0,0,.12); }
.custom-section h2 { font-size: 2.2rem; font-weight: 700; color: var(--heading-color); margin-bottom: 10px; }
.custom-section .cs-sub { color: var(--accent-color); font-weight: 600; text-transform: uppercase; letter-spacing: 1px; font-size: .85rem; }
.custom-section .cs-content { font-size: 1.03rem; line-height: 1.8; margin-top: 14px; }

/* ---------- GALLERY (page banner) ---------- */
.page-banner { padding: 130px 0 60px; background: linear-gradient(135deg,#0ea2bd 0%, #0b7c91 100%); color: #fff; text-align: center; }
.page-banner h1 { font-weight: 700; font-size: 2.6rem; }
.page-banner .crumb { color: rgba(255,255,255,.85); }
.page-banner .crumb a { color: #fff; text-decoration: underline; }

/* Empty state */
.empty-note { text-align: center; padding: 50px 0; color: #8a949e; }

/* =====================================================================
   RESPONSIVE / MOBILE  — overrides for all custom components
   ===================================================================== */

/* Global safety: never allow sideways scroll on small screens */
html, body { overflow-x: hidden; max-width: 100%; }
img, iframe, video { max-width: 100%; height: auto; }
.container, .container-fluid { overflow-x: hidden; }

/* ---- Tablets and below (<= 991px) ---- */
@media (max-width: 991.98px) {
  .hero-slider .swiper-slide { min-height: auto; padding: 90px 0 70px; }
  .hero-slider .slide-img { max-width: 320px; }
  .hero-slider h2 { font-size: 2.3rem; }
  .hero-slider p { font-size: 1.05rem; }
  /* swiper side arrows overlap text on narrow screens – hide, keep dots */
  .hero-slider .swiper-button-next,
  .hero-slider .swiper-button-prev { display: none; }

  .page-banner { padding: 110px 0 50px; }
  .page-banner h1 { font-size: 2rem; }

  .custom-section { padding: 60px 0; }
  .custom-section h2 { font-size: 1.9rem; }

  .blog-section { padding: 60px 0; }
  .blog-single { padding: 45px 0; }
  .blog-single .post-title { font-size: 1.8rem; }
  .blog-single .ps-lg-4 { padding-left: 0 !important; margin-top: 40px; }
}

/* ---- Phones (<= 575px) ---- */
@media (max-width: 575.98px) {
  .hero-slider .swiper-slide { padding: 80px 0 60px; }
  .hero-slider .slide-img { max-width: 240px; margin-bottom: 18px; }
  .hero-slider h2 { font-size: 1.85rem; line-height: 1.25; }
  .hero-slider .subtitle { font-size: .95rem; }
  .hero-slider p { font-size: .98rem; }
  .hero-slider .hero-btns { gap: 10px; }
  .hero-slider .btn-1, .hero-slider .btn-2 { padding: 11px 24px; font-size: .95rem; }

  /* stories: tighter circles, smooth touch scroll */
  .insta-stories .story-track { gap: 14px; -webkit-overflow-scrolling: touch; }
  .insta-story { width: 76px; }
  .insta-story .ring { width: 70px; height: 70px; }

  .page-banner { padding: 100px 0 40px; }
  .page-banner h1 { font-size: 1.6rem; }
  .page-banner .crumb { font-size: .85rem; }

  .custom-section { padding: 50px 0; }
  .custom-section h2 { font-size: 1.6rem; }
  .custom-section .cs-content { font-size: .98rem; }

  /* blog cards full width with comfortable image height */
  .blog-card .thumb { height: 200px; }
  .blog-card h3 { font-size: 1.1rem; }

  /* single post */
  .blog-single .post-title { font-size: 1.5rem; }
  .blog-single .post-meta span { display: inline-block; margin: 0 12px 6px 0; }
  .blog-single .cover { max-height: 280px; }
  .blog-single .content { font-size: 1rem; }
  .blog-gallery { grid-template-columns: repeat(2, 1fr); }

  /* share buttons: equal, tappable, wrap to a tidy grid */
  .share-box { padding: 16px; }
  .share-buttons { gap: 8px; }
  .share-buttons a { flex: 1 1 calc(50% - 8px); justify-content: center; padding: 11px 10px; }

  /* contact map shorter on phones */
  #contact iframe { height: 280px !important; }
}

/* Very small screens: stories and gallery thumbnails */
@media (max-width: 360px) {
  .hero-slider h2 { font-size: 1.65rem; }
  .blog-gallery { grid-template-columns: 1fr 1fr; gap: 8px; }
}

/* ---- Header / logo crowding on mobile ---- */
@media (max-width: 991.98px) {
  .header .logo img { max-height: 52px; }
  .header .logo h1  { font-size: 22px; }
  .header .logo span{ font-size: 22px; }
}
@media (max-width: 575.98px) {
  .header .logo img { max-height: 44px; margin-right: 5px; }
  .header .logo h1  { font-size: 18px; }
  .header .logo span{ font-size: 18px; }
  /* free up space: hide the header CTA (Get Started is in the menu + hero) */
  .header .btn-getstarted { display: none; }
}