/* ==========================================================================
   Samsung Galaxy Z Fold Specific Stylesheet
   Targets Cover Screen (very narrow) and Unfolded Screen (squarish aspect ratio)
   ========================================================================== */

/* 1. Cover Screen Optimizations (Viewport width <= 360px)
   Addresses narrow columns, overlapping navbar elements, and text squishing */
@media screen and (max-width: 360px) {
  /* Scale navbar logos down to fit cover screen width without wrapping */
  .sd-nav .container {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  .sd-nav img {
    height: 28px !important;
  }

  /* Reduce card paddings to maximize readable area for copy text */
  .gap-card, .legacy-card, .attendee-card {
    padding: 24px 16px !important;
  }

  /* Scale down section headings to fit the narrow viewport gracefully */
  .section-h {
    font-size: 22px !important;
    letter-spacing: -0.01em !important;
    line-height: 1.25 !important;
  }

  /* Adjust hero section details spacing and text sizes */
  .hero-title {
    font-size: 30px !important;
    line-height: 1.15 !important;
  }
  .sd-badge {
    font-size: 11px !important;
    padding: 6px 12px !important;
    margin-bottom: 16px !important;
  }
  .hero-meta-item {
    padding: 12px !important;
  }
  .hero-meta-title {
    font-size: 13px !important;
  }
  
  /* Timeline spacing compressions for narrow viewports */
  .timeline-content {
    padding: 20px 15px !important;
  }
  .timeline-time {
    font-size: 14px !important;
  }

  /* RSVP iframe height adjustment */
  #wpFormIframe {
    height: 480px !important;
  }

  /* Speaker poster scaling overrides for narrow screen */
  .speaker-poster {
    max-width: 250px !important;
    height: 330px !important;
  }
  .speaker-poster-img {
    height: 250px !important;
  }
  .speaker-poster-name {
    font-size: 17px !important;
  }
  .speaker-poster-overlay {
    height: 150px !important;
  }
}

/* 2. Unfolded Screen State (Width 768px - 850px, and aspect ratio of ~1:1 or 4:3)
   Optimizes squarish tablet viewport configurations */
@media screen and (min-width: 768px) and (max-width: 850px) and (min-aspect-ratio: 1/1) {
  /* Prevent background gradient blobs from dominating the squarish viewport */
  .sd-blob {
    width: 350px !important;
    height: 350px !important;
    filter: blur(65px) !important;
  }

  /* Adjust hero title to wrap elegantly on squarish screens */
  .hero-title {
    font-size: 44px !important;
    max-width: 90% !important;
  }

  /* Balance columns and ensure grid cards align gracefully */
  .col-md-6 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }

  /* Ensure the timeline container has balanced padding */
  .sd-agenda {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}