/* about.css */

/* Page background */
body {
    background-color: #504f4f;
  }
  
  /* Reset main spacing */
  main {
    padding-top: 0;
    padding-bottom: 40px;
  }
  
  /* About page container */
  .about-content {
    margin-top: 20px;              /* 20px under fixed header */
    display: flex;
    flex-direction: column;
    gap: 20px;                     /* 20px between rows on mobile */
  }
  
  /* Embedded map base styling */
  .map-embed iframe {
    width: 100%;                   /* fill container */
    height: 300px;
    border: 2px solid #ccc;
    border-radius: 4px;
  }
  
  /* Sidebar (hours + connect) */
  .aside {
    display: flex;
    flex-direction: column;
    gap: 20px;                     /* 20px between store-hours and connect-box */
  }

  /* Call Us box styling */
.call-us-box {
    border: 2px solid #ccc;
    padding: 16px;
    border-radius: 4px;
    text-align: center;      /* center heading & link */
    background-color: #660707;
  }
  .call-us-box h2 {
    margin-bottom: 8px;
    text-decoration: underline;
    font-size: 1.25rem;
    color: #cccbcb;
  }
  .call-us-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #cccbcb;
    font-size: 0.9rem;
    text-decoration: underline;
  }
  .call-us-icon {
    width: 24px;
    height: 24px;
  }
  
  
  /* Desktop layout: side-by-side with equal gutters */
  @media (min-width: 1100px) {
    .about-content {
      display: grid;
      grid-template-columns:
        1fr                                  /* left gutter */
        clamp(600px, 60vw, 1000px)           /* fluid map width */
        1fr                                  /* middle gutter */
        auto                                 /* sidebar width */
        1fr;                                 /* right gutter */
      align-items: start;
      gap: 0;                                /* grid gap controlled by gutters */
      margin-top: 20px;                     /* still 20px under header */
    }
  
    .map-embed {
      grid-column: 2;
    }
  
    .aside {
      grid-column: 4;
      gap: 20px;                            /* ensure 20px between its child boxes */
    }
  
    /* Sidebar box sizing: no extra top margins */
    .store-hours,
    .connect-box {
      width: 280px;
      margin-top: 0;
    }
  
    /* Larger map on desktop */
    .map-embed iframe {
      height: 500px;
    }
  }
  /* Mobile gutters for all sidebar boxes */
@media (max-width: 1099px) {
    .store-hours,
    .connect-box,
    .call-us-box {
      margin: 0 20px;   /* 20px on left & right */
      width: auto;      /* let them fill the rest of the space */
    }
  }