/* ==========================================================================
   JTTT Travel — join7page tablet layout fix
   Created: 2026-08-05
   Purpose: iPad / tablet landscape widths (901px–1400px) were falling into the
            desktop layout, which does not fit those viewports. This file
            re-applies the existing mobile layout (the @media (max-width:900px)
            rule set from style.css) to tablet-sized viewports.
   Revert:  delete this file and remove the <link> tag from index.html.
   ========================================================================== */

/* --- 1) All tablets up to 1200px (iPad 1024 / Air 1180 / most Android) ---- */
@media (min-width: 901px) and (max-width: 1200px) {
  .hero { min-height: auto; padding: 16px 16px 28px; }
  .nav { align-items: flex-start; }
  .brand strong { font-size: 18px; }
  .brand span { font-size: 12px; }
  .logo-img, .logo-placeholder { width: 42px; height: 42px; }
  .logo-contact a { font-size: 12px; }
  .nav-btn { display: none; }
  .hero-inner, .overview-wrap, .booking-wrap, .details-grid, .lunch-box { grid-template-columns: 1fr; }
  .hero-inner { margin-top: 32px; gap: 14px; }
  h1 { font-size: clamp(34px, 9vw, 44px); line-height: 1.05; margin: 10px 0 12px; }
  h2 { font-size: clamp(28px, 7vw, 34px); }
  .subtitle { font-size: 16px; line-height: 1.55; margin: 0 0 4px; }
  .hero-price { width: 100%; padding: 12px 16px; margin: 16px 0; }
  .hero-price strong { font-size: 28px; }
  .hero-glass-card { background: rgba(5, 8, 20, 0.52); border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 22px; padding: 20px 16px 16px; backdrop-filter: blur(14px); }
  .trust-row { gap: 6px; margin: 14px 0; }
  .trust-row span { font-size: 13px; padding: 8px 12px; }
  .primary-btn, .secondary-btn { width: 100%; text-align: center; padding: 15px 18px; }
  .hero-primary-btn { font-size: 17px; padding: 17px 24px; }
  .hero-wa-btn { margin-left: 0; margin-top: 10px; display: block; text-align: center; }
  .secondary-btn { margin-left: 0; margin-top: 10px; }
  .hero-no-prepay { font-size: 13px; padding: 7px 14px; margin: 10px 0 12px; }
  .hero-urgency-wrap { margin: 12px 0 14px; }
  .hero-urgency-static { font-size: 12px; }
  .exp-photo { flex: 0 0 55%; }
  .exp-photo img { height: 150px; }
  .overview-section, .lunch-section, .details-section, .reviews-section, .conversion-section, .booking-section, .section { padding: 56px 18px; }
  .highlight-grid { grid-template-columns: 1fr; gap: 16px; }
  .overview-cards, .review-grid, .mini-trust, .conversion-grid { grid-template-columns: 1fr; }
  .highlight-card img { height: 220px; }
  .highlight-content { padding: 20px; }
  .lunch-box, .conversion-box, .booking-box { padding: 22px; border-radius: 24px; }
  .lunch-images { grid-template-columns: 1fr; }
  .lunch-images img { height: 210px; }
  .review-score { border-radius: 20px; flex-direction: column; }
  .success-row { grid-template-columns: 1fr; gap: 4px; }
  .booking-success-modal { padding: 22px; border-radius: 24px; }
  .booking-success-modal h2 { font-size: 26px; }
  .sticky-cta { width: calc(100% - 20px); bottom: 10px; border-radius: 18px; padding: 8px 8px 8px 14px; }
  footer { padding-bottom: 96px; }
  .wa-float { bottom: 80px; right: 14px; width: 50px; height: 50px; }
}

/* --- 2) Large touch tablets 1201–1400px (iPad Pro 12.9" landscape = 1366) --
   pointer:coarse + hover:none keeps 1280/1366 laptops on the desktop layout. */
@media (min-width: 1201px) and (max-width: 1400px) and (pointer: coarse) and (hover: none) {
  .hero { min-height: auto; padding: 16px 16px 28px; }
  .nav { align-items: flex-start; }
  .brand strong { font-size: 18px; }
  .brand span { font-size: 12px; }
  .logo-img, .logo-placeholder { width: 42px; height: 42px; }
  .logo-contact a { font-size: 12px; }
  .nav-btn { display: none; }
  .hero-inner, .overview-wrap, .booking-wrap, .details-grid, .lunch-box { grid-template-columns: 1fr; }
  .hero-inner { margin-top: 32px; gap: 14px; }
  h1 { font-size: clamp(34px, 9vw, 44px); line-height: 1.05; margin: 10px 0 12px; }
  h2 { font-size: clamp(28px, 7vw, 34px); }
  .subtitle { font-size: 16px; line-height: 1.55; margin: 0 0 4px; }
  .hero-price { width: 100%; padding: 12px 16px; margin: 16px 0; }
  .hero-price strong { font-size: 28px; }
  .hero-glass-card { background: rgba(5, 8, 20, 0.52); border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 22px; padding: 20px 16px 16px; backdrop-filter: blur(14px); }
  .trust-row { gap: 6px; margin: 14px 0; }
  .trust-row span { font-size: 13px; padding: 8px 12px; }
  .primary-btn, .secondary-btn { width: 100%; text-align: center; padding: 15px 18px; }
  .hero-primary-btn { font-size: 17px; padding: 17px 24px; }
  .hero-wa-btn { margin-left: 0; margin-top: 10px; display: block; text-align: center; }
  .secondary-btn { margin-left: 0; margin-top: 10px; }
  .hero-no-prepay { font-size: 13px; padding: 7px 14px; margin: 10px 0 12px; }
  .hero-urgency-wrap { margin: 12px 0 14px; }
  .hero-urgency-static { font-size: 12px; }
  .exp-photo { flex: 0 0 55%; }
  .exp-photo img { height: 150px; }
  .overview-section, .lunch-section, .details-section, .reviews-section, .conversion-section, .booking-section, .section { padding: 56px 18px; }
  .highlight-grid { grid-template-columns: 1fr; gap: 16px; }
  .overview-cards, .review-grid, .mini-trust, .conversion-grid { grid-template-columns: 1fr; }
  .highlight-card img { height: 220px; }
  .highlight-content { padding: 20px; }
  .lunch-box, .conversion-box, .booking-box { padding: 22px; border-radius: 24px; }
  .lunch-images { grid-template-columns: 1fr; }
  .lunch-images img { height: 210px; }
  .review-score { border-radius: 20px; flex-direction: column; }
  .success-row { grid-template-columns: 1fr; gap: 4px; }
  .booking-success-modal { padding: 22px; border-radius: 24px; }
  .booking-success-modal h2 { font-size: 26px; }
  .sticky-cta { width: calc(100% - 20px); bottom: 10px; border-radius: 18px; padding: 8px 8px 8px 14px; }
  footer { padding-bottom: 96px; }
  .wa-float { bottom: 80px; right: 14px; width: 50px; height: 50px; }
}

/* --- 3) Tablet readability: keep the one-column content from stretching ----
   On a 1024–1366px viewport a single column would otherwise run edge to edge.
   Centre it at a comfortable measure so it reads like the phone layout. */
@media (min-width: 901px) and (max-width: 1200px),
       (min-width: 1201px) and (max-width: 1400px) and (pointer: coarse) and (hover: none) {
  .hero-inner,
  .overview-wrap,
  .booking-wrap,
  .details-grid,
  .highlight-grid,
  .overview-cards,
  .review-grid,
  .mini-trust,
  .conversion-grid,
  .lunch-box,
  .conversion-box,
  .booking-box,
  .review-score,
  .lunch-images {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
  }
  /* Media must always fill its container on tablet — this is the
     "ภาพออกมาไม่เต็ม" symptom. */
  .highlight-card img,
  .lunch-images img,
  .exp-photo img {
    width: 100%;
    display: block;
    object-fit: cover;
  }
}