/* ═══════════════════════════════════════════════════
   Responsive Breakpoints
   ═══════════════════════════════════════════════════ */

/* --- Tablet (768px) --- */
@media (max-width: 768px) {
  section { padding: 60px 20px; }
  .wishes-cards { grid-template-columns: 1fr 1fr; gap: 12px; }
  .wish-card { padding: 24px 16px; }
  .envelope { width: 300px; height: 210px; }
  .crescent-moon { width: 35px; height: 35px; top: 5%; right: 8%; }
  .geo-corner { width: 50px; height: 50px; }
  .letter-text { font-size: 13px; }
  .greeting-card { padding: 28px 20px 22px; }
  .greeting-name { font-size: clamp(42px, 11vw, 80px); }
  .greeting-message { margin-bottom: 20px; }
  .greeting-divider { height: 14px; margin: 0 auto 18px; }
  .ayah-block { margin-bottom: 20px; }
  .prayer-block { margin-bottom: 18px; }
  .personal-note { margin-bottom: 14px; }
  .greeting-time-heading { margin-bottom: 16px; }
  .greeting-flower { font-size: 16px; }
  .greeting-moon { width: 38px; height: 38px; top: 5%; right: 6%; }
}

/* --- Small mobile (480px) --- */
@media (max-width: 480px) {
  .wishes-cards { grid-template-columns: 1fr; max-width: 300px; margin: 48px auto 0; }
  .adjective-cloud { gap: 8px; }
  .adj-tag { padding: 6px 16px; font-size: 14px; }
  .greeting-card { padding: 28px 18px 24px; border-radius: 16px; }
  .greeting-name { font-size: clamp(42px, 11vw, 72px); }
  .greeting-time-label { font-size: 12px; letter-spacing: 4px; }
  .greeting-flower { font-size: 14px; }

  /* Mobile greeting layout overrides */
  .greeting-name-wrap { margin-bottom: 6px; }
  .greeting-time-label { font-size: 11px; letter-spacing: 3px; margin-bottom: 6px; }
  .greeting-name { font-size: clamp(36px, 10vw, 60px); }
  .greeting-time-heading { font-size: 13px; margin-top: 6px; margin-bottom: 14px; }
  .greeting-card { padding: 22px 18px 18px; border-radius: 14px; max-width: min(580px, 92vw); }
  .greeting-card .geo-corner { width: 26px; height: 26px; }
  .greeting-card::before { inset: 5px; }
  #greeting-page { padding: 12px; }

  /* Card internals */
  .greeting-message { font-size: clamp(14px, 2.2vw, 17px); line-height: 1.65; margin-bottom: 18px; }
  .greeting-divider { height: 14px; margin: 0 auto 16px; }
  .ayah-block { margin-bottom: 18px; }
  .ayah-arabic { font-size: clamp(17px, 3.2vw, 24px); line-height: 1.8; margin-bottom: 8px; }
  .ayah-translation { font-size: clamp(13px, 1.8vw, 16px); line-height: 1.6; margin-bottom: 5px; }
  .ayah-reference { font-size: 10px; letter-spacing: 1.5px; }
  .prayer-block { margin-bottom: 18px; }
  .prayer-arabic { font-size: clamp(16px, 2.8vw, 22px); line-height: 1.8; margin-bottom: 8px; }
  .prayer-translation { font-size: clamp(12px, 1.6vw, 15px); line-height: 1.55; }
  .personal-note { margin-bottom: 14px; }
  .personal-note-text { font-size: clamp(15px, 2.2vw, 19px); line-height: 1.55; margin-bottom: 5px; }
  .personal-note-sign { font-size: 12px; }
  .greeting-footer { font-size: 12px; letter-spacing: 3px; margin-top: 6px; }

  /* Tighter player */
  #music-player-bar { width: calc(100% - 24px); right: 12px; bottom: 12px; border-radius: 12px; }
  .mini-player { padding: 10px 12px; gap: 8px; }
  .mini-art { width: 32px; height: 32px; border-radius: 6px; }
  .mini-title { font-size: 12px; }
  .mini-artist { font-size: 9px; }
  .mini-play-btn { width: 28px; height: 28px; font-size: 10px; }
  .mini-expand-btn { width: 20px; height: 20px; }
  .mini-progress-bar { padding: 0 12px 8px; }
  .full-player { padding: 24px 20px; gap: 12px; }
  .full-art { width: min(180px, 48vmin); border-radius: 10px; }
  .full-play-btn { width: 46px; height: 46px; font-size: 15px; }
  .full-progress-section { max-width: 80%; }
  .full-title { font-size: 18px; }
  .full-artist { font-size: 10px; }
  .full-close-btn { top: 14px; right: 16px; width: 32px; height: 32px; font-size: 13px; }

  /* Tighter extras */
  .name-gift-btn { width: 36px; height: 36px; font-size: 15px; bottom: auto; top: 20px; left: 16px; }
  .name-fact-card { padding: 28px 20px 22px; border-radius: 18px; }
  .name-fact-name { font-size: 32px; }
  .name-fact-arabic { font-size: 24px; }
  .name-fact-title { font-size: 18px; }
  .name-fact-text { font-size: 14px; }
  .parallax-clock { left: 50%; transform: translateX(-50%); top: 5%; }
  .parallax-clock-h, .parallax-clock-m { font-size: 14vh; }
  .parallax-clock-sep { font-size: 10vh; }

  /* Reduce blur for mobile GPU perf */
  .greeting-card { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
  #music-player-bar { backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
  .name-fact-card { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
}

/* --- Very short screens (landscape phones) --- */
@media (max-height: 600px) {
  .greeting-name-wrap { margin-bottom: 2px; }
  .greeting-time-label { margin-bottom: 2px; font-size: 10px; }
  .greeting-name { font-size: clamp(28px, 7vw, 48px); }
  .greeting-time-heading { font-size: 11px; margin-top: 2px; margin-bottom: 6px; }
  .greeting-card { padding: 14px 14px 12px; }
  .greeting-message { font-size: 13px; line-height: 1.5; margin-bottom: 10px; }
  .greeting-divider { height: 10px; margin: 0 auto 10px; }
  .ayah-block { margin-bottom: 10px; }
  .ayah-arabic { font-size: 15px; line-height: 1.6; margin-bottom: 4px; }
  .ayah-translation { font-size: 12px; line-height: 1.45; }
  .prayer-block { margin-bottom: 10px; }
  .prayer-arabic { font-size: 14px; line-height: 1.6; margin-bottom: 4px; }
  .prayer-translation { font-size: 11px; }
  .personal-note { margin-bottom: 8px; }
  .personal-note-text { font-size: 14px; line-height: 1.45; }
  .greeting-footer { font-size: 10px; margin-top: 4px; }
  #greeting-page { padding: 8px; }
  .parallax-clock-h, .parallax-clock-m { font-size: 12vh; }
  .parallax-clock-sep { font-size: 8vh; }
}