/*
  ════════════════════════════════════════════════════════════
  PREMIER MEDIA — Comprehensive Mobile Optimizations
  Target: responsive, touch-friendly, space-conscious
  Breakpoints:
    900px  — fullPage.js responsive trigger (disables scroll-snap)
    767px  — two-column stacking (xs Bootstrap)
    575px  — 1-col service grid
    480px  — small phones
    375px  — ultra-compact
  ════════════════════════════════════════════════════════════
*/

/* ── 1. NAVIGATION MENU ──────────────────────────────────── */
@media only screen and (max-width: 991px) {
  /* Hide the decorative image half — wastes mobile real-estate */
  .navigation-menu-img {
    display: none !important;
  }
  /* Navigation menu txt: full-width, centered */
  .navigation-menu-txt {
    width: 100% !important;
    left: 0 !important;
    position: static !important;
    text-align: center !important;
  }
  .center-container-menu {
    width: 100%;
    height: 100%;
  }
  /* Navigation overlay positioning */
  .navigation-menu-img-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /* Nav links: larger tap-target, better spacing */
  nav.navigation-menu li {
    margin: 0 0 14px;
  }
  nav.navigation-menu a {
    font-size: 20px;
    padding: 8px 16px;
    display: inline-block;
  }
  /* Down Payment CTA in nav: comfortable size */
  li.last {
    margin-top: 24px !important;
  }
  a.downpayment-modal-launcher {
    margin-top: 0 !important;
    padding: 13px 32px !important;
    font-size: 12px !important;
    letter-spacing: 2.5px !important;
  }
}

/* ── 2. HERO SECTION ─────────────────────────────────────── */
@media only screen and (max-width: 991px) {
  /* Hide prev/next arrows — users swipe on mobile */
  .hero-slider-bg-controls {
    display: none !important;
  }
  /* Hero play/pause + progress: compact + repositioned */
  .swiper-slide-controls-play-pause-wrapper {
    bottom: 56px !important;
    right: 20px !important;
  }
  /* Pagination dots: slightly up */
  .swiper-slide-pagination {
    bottom: 32px !important;
  }
}
@media only screen and (max-width: 575px) {
  /* Subtitle: tighter */
  .intro-subtitle {
    font-size: 13px !important;
    letter-spacing: 3px;
    margin-bottom: 6px !important;
  }
  /* Hero description: compact */
  .intro-description {
    font-size: 11px !important;
    max-width: 240px !important;
    margin: 10px auto 22px !important;
    letter-spacing: 1px;
  }
  /* Hero CTA button: full-width-ish */
  .intro-cta-btn {
    padding: 11px 24px !important;
    font-size: 9px !important;
    letter-spacing: 2px !important;
  }
  /* Bottom credits */
  .bottom-credits {
    font-size: 7px !important;
    left: 16px !important;
    bottom: 28px !important;
  }
  /* Scroll indicator: smaller */
  .scroll-indicator {
    height: 30px !important;
  }
}

/* ── 3. ABOUT SECTION ────────────────────────────────────── */
/* (image col already hidden at 768px via style-v1-5.css rule #26) */
@media only screen and (max-width: 767px) {
  /* About content wrapper: stop forcing 100vh when image is hidden */
  .about-content-wrapper {
    height: auto !important;
    min-height: 100vh !important;
  }
  .about-content {
    position: relative !important;
    height: auto !important;
    min-height: 100vh !important;
    padding-top: 80px !important;
    padding-bottom: 80px !important;
  }
  .about-content-inner {
    padding: 0 28px !important;
  }
  /* About text: comfortable reading */
  .about-txt {
    margin: 24px 0 0 !important;
    padding: 0 !important;
    font-size: 13px !important;
    line-height: 1.85 !important;
    text-align: left !important;
  }
  /* Section heading: slightly smaller */
  h2.section-heading {
    font-size: 28px !important;
    padding-bottom: 20px !important;
  }
  /* Skills bar: reduce side padding */
  .show-skillbar {
    padding: 0 !important;
    margin-top: 28px !important;
  }
  /* Facts counter: tighter */
  .facts-counter-wrapper {
    margin-top: 28px !important;
  }
  .facts-counter-number {
    font-size: 28px !important;
  }
  .facts-counter-description-img {
    font-size: 22px !important;
    margin: 8px 0 6px !important;
  }
  .facts-counter-title {
    font-size: 10px !important;
  }
  /* Clients logo grid: 2-col → already handled; items use full width */
  .clients-logo-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px 12px !important;
  }
  .clients-logo-grid-last-row {
    gap: 12px !important;
  }
  .clients-logo-grid-last-row .client-item {
    width: calc(50% - 6px) !important;
    min-width: 80px !important;
  }
  .client-item {
    min-height: 52px !important;
    padding: 10px 8px !important;
  }
  .client-logo-text {
    font-size: 7px !important;
    letter-spacing: 1px !important;
  }
}
@media only screen and (max-width: 375px) {
  .clients-logo-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ── 4. SERVICES SECTION ─────────────────────────────────── */
@media only screen and (max-width: 991px) {
  /* Header: reduce generous padding */
  .pm-services-header {
    padding: 40px 28px 20px !important;
  }
  /* Services grid: already 2-col at 991px, 1-col at 575px */
  /* Service card: auto-reveal content on touch — no hover needed */
  .pm-service-card-list {
    max-height: 160px !important;
    opacity: 1 !important;
    transition: none !important;
  }
  .pm-service-card-cta {
    opacity: 1 !important;
    transition: none !important;
  }
  .pm-service-card-divider {
    width: 44px !important;
  }
  /* CTA footer */
  .pm-services-cta {
    padding: 20px 28px 32px !important;
  }
  .pm-services-cta p {
    font-size: 10px !important;
    letter-spacing: 1.5px !important;
    margin-bottom: 1.4rem !important;
  }
}
@media only screen and (max-width: 575px) {
  /* Single column: cards stack with more image height */
  .pm-service-card {
    min-height: 300px !important;
  }
  .pm-service-card-title {
    font-size: 17px !important;
    letter-spacing: 4px !important;
  }
  .pm-service-card-content {
    padding: 24px 24px !important;
  }
  .pm-services-cta .btn-general {
    padding: 13px 32px !important;
    white-space: normal !important;
  }
}

/* ── 5. WORKS CAROUSEL ───────────────────────────────────── */
@media only screen and (max-width: 991px) {
  /* Works items: always show overlay + content (no hover on touch) */
  .works-page-img-carousel-wrapper::after {
    opacity: 1 !important;
    background-color: rgba(0,0,0,0.5) !important;
  }
  .works-page-img-carousel-wrapper .works-page-img-carousel-content {
    max-height: 200px !important;
    opacity: 1 !important;
    transition: none !important;
  }
  /* Text: move higher so button is reachable */
  .works-page-img-carousel-wrapper .works-page-img-carousel-text {
    bottom: 28px !important;
    padding: 0 32px !important;
  }
  .works-page-img-carousel-spacer-top {
    margin-top: 14px !important;
  }
  .works-page-img-carousel-title h4 {
    font-size: 20px !important;
    padding-bottom: 4px !important;
  }
  /* Carousel nav arrows: smaller, better positioned */
  .owl-theme .owl-nav {
    margin-top: 0 !important;
  }
}

/* ── 6. NEWS CAROUSEL ────────────────────────────────────── */
@media only screen and (max-width: 991px) {
  /* Always show content */
  .news-page-img-carousel-wrapper::after {
    opacity: 1 !important;
    background-color: rgba(0,0,0,0.55) !important;
  }
  .news-page-img-carousel-wrapper .news-page-img-carousel-content {
    max-height: 260px !important;
    opacity: 1 !important;
    transition: none !important;
  }
  .news-page-img-carousel-wrapper .news-page-img-carousel-text {
    bottom: 28px !important;
    padding: 0 28px !important;
  }
  .news-page-img-carousel-spacer-top {
    margin-top: 16px !important;
  }
  .news-page-img-carousel-spacer-bottom {
    margin-top: 10px !important;
  }
  .news-page-img-carousel-wrapper .news-page-img-carousel-text p {
    font-size: 11px !important;
    line-height: 1.7 !important;
  }
  .news-page-img-carousel-title h4 {
    font-size: 22px !important;
  }
  /* Panel right (news "read more" panel): full width */
  .panel-right {
    width: 100% !important;
  }
}

/* ── 7. GALLERY MORPH ────────────────────────────────────── */
@media only screen and (max-width: 991px) {
  .morph-intro-text {
    padding: 0 28px;
    width: 100%;
    box-sizing: border-box;
    left: 0;
    transform: translateY(-50%);
  }
  .morph-active-content {
    padding: 0 28px;
    width: 100%;
    box-sizing: border-box;
    left: 0;
    transform: none;
    top: 8%;
  }
  .morph-subtitle-active {
    font-size: 12px !important;
  }
}

/* ── 8. TESTIMONIALS ─────────────────────────────────────── */
@media only screen and (max-width: 991px) {
  .testimonials-wrapper {
    padding: 48px 28px !important;
  }
  .testimonials-eyebrow {
    margin-bottom: 36px !important;
  }
  /* testimonials-grid already switches to column at 768px */
}
@media only screen and (max-width: 575px) {
  .testimonials-wrapper {
    padding: 40px 20px !important;
  }
  .testimonial-quote {
    font-size: 12px !important;
    line-height: 1.85 !important;
  }
  .testimonials-eyebrow {
    margin-bottom: 28px !important;
  }
  .testimonials-grid {
    gap: 28px !important;
  }
}

/* ── 9. CONTACT SECTION ──────────────────────────────────── */
/* (image col already hidden at 768px via style-v1-5.css rule #26) */
@media only screen and (max-width: 767px) {
  /* Contact container: height auto so content isn't clipped */
  .contact-container {
    height: auto !important;
    min-height: 100vh !important;
    padding-top: 0 !important;
  }
  /* contact-bg-wrapper: show compact image below text when desired */
  .contact-bg-wrapper {
    height: 45vh !important;
    min-height: 200px !important;
  }
  .contact-bg {
    height: 45vh !important;
    min-height: 200px !important;
  }
  /* Contact info text: nice padding */
  .contact-txt {
    padding: 0 28px !important;
    font-size: 13px !important;
  }
  /* Email link: wrap on small screens */
  .contact-info-mail {
    font-size: 16px !important;
    word-break: break-all !important;
  }
  /* Book session button */
  .contact-modal-launcher-wrapper {
    width: auto !important;
    max-width: 280px !important;
    margin: 16px auto 28px !important;
  }
  /* Social icons: larger tap targets */
  ul.social-icons-contact {
    font-size: 22px !important;
  }
  .social-icons-contact-wrapper ul li {
    padding: 0 4px !important;
  }
  /* Cert badge */
  .cert-badge-wrapper {
    margin-top: 20px !important;
  }
  .cert-badge-img {
    width: 80px !important;
    margin: 0 auto !important;
  }
}

/* ── 10. DOWN PAYMENT MODAL ──────────────────────────────── */
@media only screen and (max-width: 575px) {
  .downpayment-modal {
    width: 98% !important;
    border-radius: 8px !important;
  }
  .dp-modal-inner {
    padding: 0 18px 36px !important;
  }
  .dp-modal-heading {
    font-size: 20px !important;
    margin-bottom: 18px !important;
  }
  .downpayment-modal-closer {
    top: 10px !important;
    right: 14px !important;
    font-size: 30px !important;
  }
  .dp-amount-row {
    width: 120px !important;
  }
}

/* ── 11. CONTACT MODAL FORM ──────────────────────────────── */
@media only screen and (max-width: 767px) {
  /* Three-column form inputs stack */
  #contact-form .col-sm-4 {
    width: 100% !important;
  }
  #contact-form .col-sm-4 input {
    width: 100% !important;
  }
}

/* ── 12. GENERAL RESPONSIVE FIXES ───────────────────────── */
@media only screen and (max-width: 991px) {
  /* Ensure no horizontal scroll */
  body {
    overflow-x: hidden !important;
  }

  /* Section headings: tighter */
  .section-heading,
  .section-heading-dark {
    font-size: 28px !important;
    padding-bottom: 22px !important;
  }

  /* Owl Carousel nav arrows: touch-friendly */
  .owl-theme .owl-nav [class*='owl-'] {
    padding: 10px 16px !important;
    margin: 0 4px !important;
  }

  /* Gallery section: full width */
  .gallery-morph-container {
    width: 100% !important;
    overflow: hidden !important;
  }
}

@media only screen and (max-width: 575px) {
  /* Prevent text overflow on very small screens */
  h2, h3, h4 {
    word-break: break-word !important;
    hyphens: auto !important;
  }

  /* .c-btn: minimum touch target */
  .c-btn {
    min-height: 44px !important;
    padding: 12px 20px !important;
  }

  /* Intro title wrapper: left-center alignment */
  .swiper-slide-inner-txt {
    padding-left: 20px !important;
    padding-right: 20px !important;
    text-align: center !important;
  }

  /* Scroll indicator: compact */
  .scroll-indicator-wrapper {
    display: none !important;
  }
}

/* ── 13. ABOUT SECTION: SHOW IMAGE AS TOP TILE ──────────── */
/* On mobile, show a compact image tile at top of about section
   (overrides the display:none for image column set in style-v1-5.css) */
@media only screen and (max-width: 767px) {
  /* Re-enable the image column but make it short */
  #section1 .col-md-6.col-sm-6:first-child {
    display: block !important;
    width: 100% !important;
    height: 42vh !important;
    min-height: 180px !important;
    max-height: 300px !important;
    overflow: hidden !important;
  }
  #section1 .col-md-6.col-sm-6:first-child .about-bg-wrapper {
    height: 100% !important;
    min-height: 0 !important;
  }
  #section1 .col-md-6.col-sm-6:first-child .about-bg {
    height: 100% !important;
    min-height: 0 !important;
    background-attachment: scroll !important; /* Fix parallax on mobile */
  }
  #section1 .col-md-6.col-sm-6:last-child {
    width: 100% !important;
  }
  .about-content {
    min-height: 0 !important;
    padding-top: 48px !important;
    padding-bottom: 64px !important;
  }
  .about-content-wrapper {
    min-height: 0 !important;
  }
}

/* ── 14. CONTACT SECTION: SHOW IMAGE AS BOTTOM TILE ──────── */
@media only screen and (max-width: 767px) {
  /* Re-enable image column as bottom tile */
  #section7 .col-md-6.col-sm-6:last-child {
    display: block !important;
    width: 100% !important;
    height: 40vh !important;
    min-height: 180px !important;
    overflow: hidden !important;
  }
  #section7 .col-md-6.col-sm-6:last-child .contact-bg-wrapper {
    height: 100% !important;
  }
  #section7 .col-md-6.col-sm-6:last-child .contact-bg {
    height: 100% !important;
    background-attachment: scroll !important;
  }
  #section7 .col-md-6.col-sm-6:first-child {
    width: 100% !important;
  }
  /* Contact container: auto height */
  .contact-container {
    height: auto !important;
    min-height: 55vh !important;
    padding: 56px 0 48px !important;
  }
}

/* ── 15. WORKS + NEWS: SINGLE-ITEM FULL-HEIGHT ON MOBILE ─── */
@media only screen and (max-width: 575px) {
  /* Each carousel item fills the section height nicely */
  .works-page-img-carousel-item {
    height: 48vh !important;
    min-height: 220px !important;
  }
  .news-page-img-carousel-item {
    height: 80vh !important;
    min-height: 320px !important;
  }
  /* Larger text in works tiles */
  .works-page-img-carousel-title h4 {
    font-size: 18px !important;
  }
  /* Adjust text block position for compact tiles */
  .works-page-img-carousel-wrapper .works-page-img-carousel-text {
    bottom: 16px !important;
    padding: 0 20px !important;
  }
  .news-page-img-carousel-wrapper .news-page-img-carousel-text {
    bottom: 20px !important;
    padding: 0 20px !important;
  }
}

/* ── 16. SERVICE CARD 2-COL LAYOUT REFINEMENT ────────────── */
@media only screen and (min-width: 576px) and (max-width: 991px) {
  /* 2-col: equal-height rows */
  .pm-services-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .pm-service-card {
    min-height: 280px !important;
  }
  /* Cards 3 & 6: span both columns for a full-width landscape row
     Creates an alternating pattern: 2-col, full-width, 2-col, full-width */
  .pm-service-card:nth-child(3),
  .pm-service-card:nth-child(6) {
    grid-column: span 2 !important;
    min-height: 200px !important;
  }
  .pm-service-card:nth-child(3) .pm-service-card-content,
  .pm-service-card:nth-child(6) .pm-service-card-content {
    max-width: 50% !important;  /* text stays left, image fills right */
  }
}

/* ── 17. TESTIMONIALS: ALTERNATING LAYOUT ────────────────── */
@media only screen and (max-width: 767px) {
  .testimonials-inner {
    max-width: 100% !important;
  }
  .testimonials-grid {
    flex-direction: column !important;
    gap: 28px !important;
  }
  .testimonial-item {
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding-bottom: 28px;
  }
  .testimonial-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }
  .testimonial-divider-line {
    margin-bottom: 16px;
  }
}

/* ── 18. LOGO: SMALLER ON MOBILE ─────────────────────────── */
@media only screen and (max-width: 575px) {
  .logo {
    top: 18px !important;
    left: 18px !important;
  }
  .navigation-icon-wrapper {
    top: 14px !important;
    right: 18px !important;
  }
}

/* ── 19. FIX PARALLAX/FIXED BACKGROUNDS ON IOS ───────────── */
@media only screen and (max-width: 991px) {
  .hero-bg,
  .about-bg,
  .contact-bg,
  .services-bg,
  .works-page-img-carousel-item,
  .news-page-img-carousel-item,
  .menu-img,
  .panel-left-bg-all {
    background-attachment: scroll !important;
  }
}

/* ── 20. SLICK ABOUT ARROWS: BIGGER TOUCH TARGETS ──────────  */
@media only screen and (max-width: 767px) {
  .slick-prev,
  .slick-next {
    width: 44px !important;
    height: 44px !important;
    bottom: 16px !important;
    top: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  .slick-prev {
    left: 50% !important;
    transform: translateX(-60px) !important;
  }
  .slick-next {
    right: auto !important;
    left: 50% !important;
    transform: translateX(16px) !important;
  }
  .slick-prev:before,
  .slick-next:before {
    font-size: 9px !important;
    padding-top: 12px !important;
  }
}

/* ── 21. FULLPAGE.JS RESPONSIVE MODE: SECTION HEIGHT OVERRIDES ── */
/*
 * When fullPage.js (responsiveWidth:900) enters responsive mode on
 * narrow viewports it still injects an inline  style="height:{vh}px"
 * on every .section element.  The selectors below are scoped to
 * body.fp-responsive (class added by fullPage.js) and use !important
 * to win against those inline styles.
 */

/* --- Services section (section2): all 6 cards + CTA must be fully
       visible without requiring internal scroll ---  */
body.fp-responsive #section2 {
  height: auto !important;
  min-height: 100vh !important;
}
body.fp-responsive #section2 .fp-tableCell {
  display: block !important;
  height: auto !important;
}
body.fp-responsive .pm-services-wrapper {
  height: auto !important;
  overflow-y: visible !important;
}

/* --- Testimonials + Brands: remove the excess vertical whitespace
       caused by vertical-align:middle centering small content in a
       fixed-height section ---  */
body.fp-responsive #section6,
body.fp-responsive #section-clients {
  height: auto !important;
  min-height: 60vh !important;
}
body.fp-responsive #section6 .fp-tableCell,
body.fp-responsive #section-clients .fp-tableCell {
  display: block !important;
  height: auto !important;
  padding: 60px 0 !important;
}

/* --- About bio section (section1): allow natural content height --- */
body.fp-responsive #section1 {
  height: auto !important;
  min-height: 100vh !important;
}
body.fp-responsive #section1 .fp-tableCell {
  display: block !important;
  height: auto !important;
}