/* =============================================================================
   jaganna.pl — Mobile fixes
   Loaded via functions.php after all theme stylesheets.
   Do NOT edit modules-responsive.css or plugins.css for mobile fixes — put
   everything here so upgrades don't overwrite our changes.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   0. Lightbox caption — hidden from users, preserved in HTML for SEO.
      Close button — pulled OUT of the hidden bar and overlaid top-right
      over the image so it's always visible and easy to tap.

   How it works:
   - .pp_details contains: counter, caption text, close button.
   - We hide .pp_details with the visually-hidden pattern (takes no space,
     text stays in DOM for SEO).
   - a.pp_close gets position:fixed — a fixed child ESCAPES the parent's
     overflow:hidden and clip, so it becomes visible even though its parent
     is hidden.
   - The icon is already FontAwesome \f00d (✕), white — same family as
     the < > arrows (\f104/\f105). We just bump the size to match.
   ----------------------------------------------------------------------------- */

/* Hide the details bar (caption + counter + social) */
.pp_content_container .pp_details {
  display: none !important;
}

/* Close button: JS moves it to div.pp_pic_holder (see jaganna-mobile-fixes.js).
   Once there, position it at top-right corner over the image. */
div.pp_pic_holder > a.pp_close {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  width: 44px !important;    /* comfortable touch target */
  height: 44px !important;
  z-index: 100002 !important;
  font-size: 0 !important;   /* hide "Close" text, icon comes from ::after */
  display: block !important;
  background: none !important;
}

/* ✕ icon — same FontAwesome family/colour as the < > arrows */
div.pp_pic_holder > a.pp_close::after {
  font-size: 20px !important;
  line-height: 1 !important;
  width: auto !important;
  height: auto !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}

/* Prev/next arrows: JS moves them to pp_pic_holder (see jaganna-mobile-fixes.js).
   Once there, pin them to the left/right edges, vertically centred. */
div.pp_pic_holder > a.pp_next,
div.pp_pic_holder > a.pp_previous {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  height: auto !important;
  margin-top: 0 !important;
  z-index: 100001 !important;
  display: block !important;
}
div.pp_pic_holder > a.pp_next {
  right: 0 !important;
  left: auto !important;
}
div.pp_pic_holder > a.pp_previous {
  left: 0 !important;
  right: auto !important;
}

/* -----------------------------------------------------------------------------
   1. Page container width on small phones
   The theme uses a "boxed" layout with a fixed-width white box.
   At 480px the theme hard-codes width:350px — too narrow for modern phones
   (iPhone 14 is 390px wide, giving ugly grey strips on both sides).
   Fix: switch to percentage-based width below 480px.
   ----------------------------------------------------------------------------- */
@media only screen and (max-width: 480px) {
  .qodef-boxed .qodef-wrapper .qodef-wrapper-inner,
  .qodef-boxed .qodef-wrapper .qodef-footer-inner {
    width: 96%;
  }
}

/* -----------------------------------------------------------------------------
   2. prettyPhoto lightbox — full-screen on mobile
   prettyPhoto sets width/height/left/top via inline JS styles.
   We override with position:fixed + !important to take it full-screen.
   Covers both portrait (max-width:768px) and landscape orientation on phones.
   ----------------------------------------------------------------------------- */
@media only screen and (max-width: 768px),
       only screen and (max-width: 1024px) and (orientation: landscape) {

  /* Dark overlay: must be fixed so it covers the full viewport (not just the page) */
  div.pp_overlay {
    position: fixed !important;
    height: 100% !important;
  }

  /* Main popup: fixed, full viewport, centred using flex */
  div.pp_pic_holder {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.95) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
  }

  /* Inner content area: full width */
  .pp_content_container {
    width: 100% !important;
  }
  .pp_content_container .pp_left,
  .pp_content_container .pp_right {
    padding: 0 !important;
  }

  /* Image wrapper */
  .pp_content {
    width: 100% !important;
    height: auto !important;
    max-height: calc(100vh - 80px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* The image itself: contain within viewport */
  div.pp_pic_holder img {
    max-width: 100vw !important;
    max-height: calc(100vh - 80px) !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
  }

  /* Close + prev/next arrows: JS moves them to div.pp_pic_holder.
     Their position rules live in Section 0 above (div.pp_pic_holder > a.*). */
}

/* -----------------------------------------------------------------------------
   3. Portfolio gallery images — full-width, centred, small gaps on mobile
   Isotope.js positions items with position:absolute + JS-calculated left/top.
   On mobile it keeps the 2-column (50%) grid sizer so all items get a ~20%
   left offset. Fix: force the container to block flow, override Isotope's
   inline positioning so items stack naturally full-width.
   ----------------------------------------------------------------------------- */
@media only screen and (max-width: 768px) {

  /* Let the container size to its content normally */
  .masonry-center.qodef-portfolio-single-holder .qodef-portfolio-media {
    width: 100% !important;
    margin: 0 !important;
    position: relative !important;
    height: auto !important; /* Isotope sets an explicit height — remove it */
  }

  /* Override Isotope absolute positioning on each item */
  .masonry-center.qodef-portfolio-single-holder .qodef-portfolio-single-media {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    margin: 0 0 8px 0 !important; /* small gap between images, was 30px */
    float: none !important;
    display: block !important;
  }

  /* The anchor wrapping each image */
  .masonry-center.qodef-portfolio-single-holder .qodef-portfolio-single-media a {
    margin: 0 !important;
    display: block !important;
  }

  /* Images fill the full width */
  .masonry-center.qodef-portfolio-single-holder .qodef-portfolio-single-media img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }

  /* Hide the Isotope grid sizer — no longer needed */
  .masonry-center.qodef-portfolio-single-holder .qodef-single-masonry-grid-sizer {
    display: none !important;
  }
}

/* -----------------------------------------------------------------------------
   4. Portfolio single page — title size on mobile
   Theme sets 40px at ≤600px; listing page uses 30-35px.
   Bring single page title in line with listing page.
   ----------------------------------------------------------------------------- */
@media only screen and (max-width: 600px) {
  .qodef-portfolio-single-holder .qodef-portfolio-title h2,
  .qodef-portfolio-single-holder.big-images .qodef-portfolio-title h2,
  .qodef-portfolio-single-holder.full-width-slider .qodef-portfolio-title h2,
  .masonry-center.qodef-portfolio-single-holder .qodef-portfolio-title h2 {
    font-size: 22px !important;
  }
}

@media only screen and (max-width: 480px) {
  .qodef-portfolio-single-holder .qodef-portfolio-title h2,
  .qodef-portfolio-single-holder.big-images .qodef-portfolio-title h2,
  .qodef-portfolio-single-holder.full-width-slider .qodef-portfolio-title h2,
  .masonry-center.qodef-portfolio-single-holder .qodef-portfolio-title h2 {
    font-size: 18px !important;
  }
}

/* -----------------------------------------------------------------------------
   5. Portfolio single post — collapsible description on mobile
   The project description (.qodef-portfolio-content) can be very long.
   On mobile we collapse it to ~5 lines with a fade and a "Czytaj więcej" button.
   The toggle behaviour is handled by jaganna-mobile-fixes.js.
   ----------------------------------------------------------------------------- */
@media only screen and (max-width: 768px) {

  .qodef-portfolio-content.jaganna-collapsed {
    max-height: 130px;
    overflow: hidden;
    position: relative;
  }

  /* Fade-out gradient at the bottom of the collapsed text */
  .qodef-portfolio-content.jaganna-collapsed::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background: linear-gradient(to bottom, transparent, #ffffff);
    pointer-events: none;
  }

  /* "Czytaj więcej" button — inherits theme font, minimal styling */
  .jaganna-read-more-btn {
    display: block;
    width: 100%;
    margin-top: 12px;
    padding: 8px 0;
    background: none;
    border: 1px solid currentColor;
    font-family: inherit;
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    cursor: pointer;
    text-align: center;
    color: inherit;
  }

  .jaganna-read-more-btn:hover {
    opacity: 0.7;
  }
}