/* ====================================
   CLARITY - RESPONSIVE MOBILE STYLES
   ==================================== */

/* ====================================
   TABLET (768px - 991px)
   ==================================== */

@media screen and (min-width: 768px) and (max-width: 991px) {

  /* Typography */
  .clc-title-xl {
    font-size: 6rem;
    letter-spacing: -3px !important;
  }

  .clc-text {
    font-size: 1.4rem;
  }

  .clc-text-display {
    font-size: 2.5rem;
  }

  .clc-text-small {
    font-size: 1.1rem;
  }

  .floating-care {
    font-size: 1.4vw;
  }

  /* Hero Section */
  .clc-hero-section {
    height: auto;
    min-height: 100vh;
    padding-top: 10vw;
    padding-bottom: 6vw;
  }

  .clc-gallery-column {
    width: 20vw;
  }

  .clc-image-card {
    margin-bottom: 20vw;
  }

  .clc-image-card.text-block .clc-text {
    font-size: 1.3rem;
  }

  /* Container */
  .container-fluid {
    width: calc(100% - 8vw);
  }

  /* About Section */
  .clc-section {
    padding-top: 8vw;
    padding-bottom: 8vw;
  }

  /* Next Events */
  .sticky-div h2 {
    font-size: 4vw;
  }

  .sticky-div p {
    font-size: 1.6vw;
  }

  .next--events--carousel li {
    height: 60vh;
  }

  /* Contact */
  .clc-contact-title span.one {
    right: -100px;
  }

  .clc-contact-title span.two {
    right: 80px;
  }

  .clc-form-input {
    font-size: 1.2vw;
    padding: 1.8rem 1.3rem;
  }

  /* Stay Close */
  .clc-rotating-text {
    font-size: 7vw;
  }

  .clc-follow-btn {
    font-size: 2.8vw;
    padding: 1.8vw 3.5vw;
  }

  /* Footer */
  .clc-footer-text {
    font-size: 1.1vw;
    justify-content: center;
    text-align: center;
  }

  .clc-footer .row {
    text-align: center;
  }

  .col-md-6.text-md-end {
    text-align: center !important;
    margin-top: 1rem;
  }
}

/* ====================================
   MOBILE (< 768px)
   ==================================== */

@media screen and (max-width: 767px) {

  /* Base Typography */
  body {
    font-size: 16px;
  }

  .clc-title {
    font-size: 2.5rem;
  }

  .clc-title-xl {
    font-size: 3.5rem !important;
    line-height: 1em;
    letter-spacing: -2px !important;
  }

  .clc-text {
    font-size: 1.1rem !important;
    line-height: 1.6em;
  }

  .clc-text-lg {
    font-size: 1.4rem;
  }

  .clc-text-display {
    font-size: 1.8rem !important;
  }

  .clc-text-small {
    font-size: 0.95rem !important;
  }

  .floating-care {
    font-size: 0.9rem !important;
    top: 10px;
    letter-spacing: 0.5px;
  }

  /* Container */
  .clc-container-custom {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .container-fluid {
    width: calc(100% - 6vw);
    padding-right: 1rem;
    padding-left: 1rem;
  }

  /* Header Navigation */
  header {
    background-color: rgba(37, 40, 56, 0.95);
    backdrop-filter: blur(10px);
  }

  .navbar-nav {
    margin: 1rem 0;
  }

  .nav-link {
    margin: 0.5rem 0;
    font-size: 1.1rem;
  }

  .navbar-collapse {
    background-color: rgba(37, 40, 56, 0.98);
    padding: 1rem;
    border-radius: 8px;
    margin-top: 1rem;
  }

  /* Hero Section */
  .clc-hero-section {
    height: auto;
    min-height: 100vh;
    padding-top: 120px;
    padding-bottom: 3rem;
  }

  .clc-arrow-right {
    width: 60px;
    margin-right: 10px;
  }

  /* Hero Gallery */
  .clc-gallery-wrap {
    height: 120vh;
  }

  .clc-gallery-rows.front {
    justify-content: space-between;
    align-items: flex-start;
    width: 140vw;
    margin-left: -20vw;
    gap: 8vw;
  }

  .clc-gallery-column {
    width: 28vw;
  }

  .clc-image-card {
    margin-bottom: 20vw;
  }

  .clc-image-card.text-block {
    display: none;
  }

  .clc-image-card.offset-large,
  .clc-image-card.offset-small {
    margin-left: 0;
    margin-right: 0;
  }

  /* Slower animations on mobile */
  .clc-gallery-rows.front .clc-gallery-column:nth-child(1) {
    animation-duration: 50s;
  }

  .clc-gallery-rows.front .clc-gallery-column:nth-child(2) {
    animation-duration: 60s;
  }

  .clc-gallery-rows.back .clc-gallery-column:nth-child(1) {
    animation-duration: 70s;
  }

  /* Sections */
  .clc-section {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .section-mod {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .section-mod h2 {
    font-size: 2.5rem !important;
    margin-bottom: 1rem;
  }

  /* About Section */
  #about .row {
    flex-direction: column;
  }

  #about .col-md-4,
  #about .col-md-6,
  #about .col-md-2 {
    width: 100%;
    max-width: 100%;
    margin-bottom: 2rem;
  }

  #about .col-md-2 {
    text-align: left !important;
  }

  /* Next Events Section */
  .get-sticky .row {
    flex-direction: column;
  }

  .sticky-div {
    position: relative !important;
    width: 100% !important;
    margin-bottom: 2rem;
  }

  .sticky-div h2 {
    font-size: 2.5rem !important;
  }

  .sticky-div p {
    font-size: 1.1rem !important;
  }

  .next--events--carousel {
    gap: 2rem;
  }

  .next--events--carousel li {
    height: 50vh;
    min-height: 300px;
  }

  .next--events--carousel p {
    font-size: 1.1rem;
  }

  .clc-arrow-right2 {
    width: 16px;
  }

  .nec--info {
    margin-top: 10px;
    padding: 0;
  }

  .parallax {
    aspect-ratio: 16 / 9;
  }

  /* Resources Section */
  .list--books {
    flex-direction: column;
    gap: 2rem;
  }

  .list--books li {
    width: 100%;
  }

  .list--books li p {
    font-size: 1.1rem;
    margin-bottom: 0.8rem;
  }

  .roll-up-effect {
    height: 18px;
  }

  .roll-up-effect small {
    font-size: 14px;
  }

  /* Stay Close Section */
  .clc-stay-close-section {
    height: 100vh;
    min-height: 600px;
  }

  .clc-stay-close-content {
    gap: 3rem;
    padding: 0 1.5rem;
  }

  .clc-rotating-text {
    font-size: 12vw;
    gap: 6vw;
  }

  .clc-rotate-icon {
    width: 8vw;
    height: 8vw;
  }

  .clc-follow-btn {
    font-size: 1.2rem;
    padding: 1rem 2rem;
    gap: 1rem;
  }

  .clc-instagram-icon {
    width: 24px;
    height: 24px;
  }

  .clc-instagram-collage {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
  }

  /* Contact Section */
  #contact-intro {
    padding-top: 3rem;
    padding-bottom: 2rem;
  }

  .clc-contact-title {
    margin-bottom: 2rem;
  }

  .clc-contact-title span.one {
    right: 0 !important;
    display: block;
  }

  .clc-contact-title span.two {
    right: 0 !important;
    display: block;
  }

  #contact .row {
    flex-direction: column;
  }

  .clc-contact-left {
    margin-bottom: 2rem;
  }

  .clc-contact-intro-text {
    max-width: 100%;
  }

  .clc-contact-intro-text .clc-text {
    font-size: 1.2rem !important;
  }

  .clc-large-icon {
    max-width: 100px;
    margin-top: 1rem;
  }

  /* Contact Form */
  .clc-form-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .clc-form-cell {
    border-right: none !important;
  }

  .clc-form-cell:nth-child(2n) {
    border-right: none;
  }

  .clc-form-input {
    font-size: 1rem !important;
    padding: 1.2rem 1rem;
  }

  .clc-form-textarea {
    min-height: 150px;
  }

  .clc-form-cell-full {
    height: auto;
  }

  .clc-link,
  .clc-submit-btn {
    font-size: 1rem !important;
    padding: 0.8rem 0 0.3rem !important;
    height: auto !important;
  }

  /* Footer */
  .clc-footer {
    padding: 3rem 0 2rem;
  }

  .clc-footer .row {
    flex-direction: column;
    text-align: center;
  }

  .clc-footer-logo {
    display: block;
    text-align: center;
    margin-bottom: 1.5rem;
  }

  .clc-footer-logo img {
    max-width: 120px;
  }

  .clc-footer .col-md-6 {
    width: 100%;
  }

  .clc-footer .col-md-6.text-md-end {
    text-align: center !important;
  }

  .clc-footer-text {
    font-size: 0.85rem !important;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.3rem;
  }

  .clc-footer-divider {
    margin: 0 0.3rem;
  }

  .clc-heart-icon {
    width: 14px;
    height: 14px;
  }

  /* Success/Error Messages */
  .clc-form-success,
  .clc-form-error {
    padding: 1.5rem;
    margin-top: 1.5rem;
  }

  .clc-form-success h3 {
    font-size: 1.5rem !important;
  }

  .clc-form-success p,
  .clc-form-error p {
    font-size: 1rem !important;
  }

  /* Utility Classes */
  .mb-5 {
    margin-bottom: 2rem !important;
  }

  .mt-5 {
    margin-top: 2rem !important;
  }
}

/* ====================================
   SMALL MOBILE (< 576px)
   ==================================== */

@media screen and (max-width: 575px) {

  .clc-title-xl {
    font-size: 2.8rem !important;
  }

  .clc-text {
    font-size: 1rem !important;
  }

  .clc-text-display {
    font-size: 1.5rem !important;
  }

  .container-fluid {
    width: calc(100% - 4vw);
  }

  .clc-rotating-text {
    font-size: 14vw;
  }

  .clc-follow-btn {
    font-size: 1rem;
    padding: 0.9rem 1.8rem;
  }

  .section-mod h2 {
    font-size: 2rem !important;
  }

  .next--events--carousel li {
    height: 40vh;
    min-height: 280px;
  }

  .clc-contact-title {
    font-size: 2.5rem !important;
  }
}

/* ====================================
   LANDSCAPE MOBILE
   ==================================== */

@media screen and (max-width: 991px) and (orientation: landscape) {

  .clc-hero-section {
    min-height: 150vh;
  }

  .clc-stay-close-section {
    height: 150vh;
  }

  .next--events--carousel li {
    height: 80vh;
  }
}