/* World Team Mission - phones and small tablets.
   The pages are laid out with fixed-width tables (868px). Below 860px every table cell becomes a block that stacks
   under the one before it, the pictures scale to the width of the screen, and the side gutters disappear.
   Desktop and laptop screens are untouched. */
@media (max-width:860px){
  html, body{ overflow-x:hidden; }
  /* the cosmos stays still behind the page and never repeats: phones ignore a fixed body background (and iPhones
     stretch a fixed "cover" picture to the whole page height), so it is drawn on a fixed layer behind the page */
  body{ background-image:none !important; background-color:#0c0a24; }
  body::before{ content:""; position:fixed; top:0; left:0; right:0; bottom:0; z-index:-1;
    background:#0c0a24 url(../graphics/nav1/background1.jpg) center top / cover no-repeat; }
  div[align="center"]{ width:100%; }
  table, tbody, tr, td{ display:block !important; width:100% !important; height:auto !important; max-width:100%; box-sizing:border-box; }
  td[width="34"]{ display:none !important; }                                   /* the empty side gutters */
  td{ text-align:center; }
  img{ max-width:100%; height:auto; }
  img[usemap]{ width:100%; }
  /* the header rows: the ring logo, then the title block, then the menu, then the underbar */
  td[background]{ background-size:100% auto !important; background-position:center top; background-repeat:no-repeat; }
  td[width="254"]{ display:none !important; }                                  /* the ring logo: decorative, dropped on phones so the header stays compact */
  td.style3{ padding:9px 10px !important; font-size:11px !important; line-height:2 !important; background-size:cover !important; }
  td.style3 a, td.style3 span{ display:inline-block; padding:0 4px; }
  /* the body column: the pale column behind the card */
  td[width="732"]{ background-size:auto !important; background-repeat:repeat-y; background-position:center top; padding:0 10px 20px !important; }
  td[width="616"]{ width:100% !important; padding:0 !important; }
  .wtm{ width:100% !important; max-width:100% !important; padding:14px 0 36px; }
  .wtm-card{ padding:18px 14px 22px; border-radius:12px; }
  .wtm h1{ font-size:24px; }
  .wtm-page .wtm-offer img.banner{ border-radius:8px; }
  .wtm-covers{ grid-template-columns:repeat(4,1fr); }
  .wtm-doors{ grid-template-columns:1fr; }
  .wtm-pp img{ width:100%; }
  .wtm-portrait{ float:none; display:block; margin:0 auto 14px; }
  .wtm .row{ flex-direction:column; gap:0; }
  .wtm-point{ grid-template-columns:1fr; }
  .wtm-grid{ grid-template-columns:repeat(2,1fr); }
  .wtm-btns{ justify-content:center; }
  .wtm-send button{ width:100%; }
  /* copyright bar */
  td[width="800"][height="35"]{ height:auto !important; padding:14px 8px 0 !important; background:none !important;   /* no picture behind it on phones: */
    color:#e8c873; font-size:10px; line-height:1.6; letter-spacing:.06em; }                                           /* gold text straight on the cosmos */
  td[width="800"][height="35"] .style3{ color:#e8c873; font-size:10px; white-space:nowrap; }
  td[width="800"][height="35"] .style3:last-child{ display:block; }                                                  /* ALL RIGHTS RESERVED on its own bottom line */
}

/* ---- the phone header: one picture drawn for phones replaces the two desktop header pictures ---- */
.wtm-phonehdr{ display:none; }
@media (max-width:860px){
  .wtm-phonehdr{ display:block; width:100%; line-height:0; }
  .wtm-phonehdr img{ width:100%; height:auto; display:block; }
  td[width="800"][height="163"], td[width="580"][height="173"]{ display:none !important; }   /* the desktop banner and title block */
  td[width="580"][height="68"]{ display:none !important; }                                 /* the underbar picture below the menu */
  td[width="800"][height="141"]{ display:none !important; }                                /* the golden path strip: dropped on phones */
  td[width="732"]{ padding:0 !important; }                                                  /* the body matches the width of the phone header */
  td[background="graphics/nav1/nav_body.png"]{ background:none !important; }                 /* no pale column on phones: the card sits on the cosmos */
  .wtm-card{ background:linear-gradient(180deg,rgba(203,99,125,.8),rgba(141,101,163,.8)); } /* 80% opaque: the stars show through the card */
  .wtm{ padding:14px 0 16px; }                                                              /* less room under the card before the copyright bar */
  div[align="center"] > p, body > p[align="center"]{ display:none; }                        /* the blank paragraphs after the copyright bar */
  body{ padding-bottom:36px; }
}