/* Tablet Grid Extension for Foundation 3
 * 
 * This extension adds a tablet breakpoint to the Foundation 3 grid system
 * allowing for more flexibility in responsive designs.
 */

/* Tablet breakpoint defined between mobile (767px) and desktop (1280px) */
@media only screen and (min-width: 768px) and (max-width: 1023px) {
    /* Basic tablet grid */
    .tablet-one { width: 8.33333% !important; }
    .tablet-two { width: 16.66667% !important; }
    .tablet-three { width: 25% !important; }
    .tablet-four { width: 33.33333% !important; }
    .tablet-five { width: 41.66667% !important; }
    .tablet-six { width: 50% !important; }
    .tablet-seven { width: 58.33333% !important; }
    .tablet-eight { width: 66.66667% !important; }
    .tablet-nine { width: 75% !important; }
    .tablet-ten { width: 83.33333% !important; }
    .tablet-eleven { width: 91.66667% !important; }
    .tablet-twelve { width: 100% !important; }
  
    /* Tablet offset classes */
    .tablet-offset-by-one { margin-left: 8.33333% !important; }
    .tablet-offset-by-two { margin-left: 16.66667% !important; }
    .tablet-offset-by-three { margin-left: 25% !important; }
    .tablet-offset-by-four { margin-left: 33.33333% !important; }
    .tablet-offset-by-five { margin-left: 41.66667% !important; }
    .tablet-offset-by-six { margin-left: 50% !important; }
    .tablet-offset-by-seven { margin-left: 58.33333% !important; }
    .tablet-offset-by-eight { margin-left: 66.66667% !important; }
    .tablet-offset-by-nine { margin-left: 75% !important; }
    .tablet-offset-by-ten { margin-left: 83.33333% !important; }
    .tablet-offset-by-eleven { margin-left: 91.66667% !important; }
  
    /* Tablet push/pull classes */
    .tablet-push-one { left: 8.33333% !important; }
    .tablet-push-two { left: 16.66667% !important; }
    .tablet-push-three { left: 25% !important; }
    .tablet-push-four { left: 33.33333% !important; }
    .tablet-push-five { left: 41.66667% !important; }
    .tablet-push-six { left: 50% !important; }
    .tablet-push-seven { left: 58.33333% !important; }
    .tablet-push-eight { left: 66.66667% !important; }
    .tablet-push-nine { left: 75% !important; }
    .tablet-push-ten { left: 83.33333% !important; }
    .tablet-push-eleven { left: 91.66667% !important; }
  
    .tablet-pull-one { right: 8.33333% !important; }
    .tablet-pull-two { right: 16.66667% !important; }
    .tablet-pull-three { right: 25% !important; }
    .tablet-pull-four { right: 33.33333% !important; }
    .tablet-pull-five { right: 41.66667% !important; }
    .tablet-pull-six { right: 50% !important; }
    .tablet-pull-seven { right: 58.33333% !important; }
    .tablet-pull-eight { right: 66.66667% !important; }
    .tablet-pull-nine { right: 75% !important; }
    .tablet-pull-ten { right: 83.33333% !important; }
    .tablet-pull-eleven { right: 91.66667% !important; }
  
    /* Tablet-specific visibility classes */
    .show-for-tablet { display: inherit !important; }
    .hide-for-tablet { display: none !important; }
    
    /* Fix for column behavior in tablet view */
    .column, .columns {
      float: left;
    }
    
    [class*="column"] + [class*="column"]:last-child {
      float: right;
    }
    
    [class*="column"] + [class*="column"].end {
      float: left;
    }
    
    /* Tablet block grids */
    .block-grid.tablet-one-up > li { width: 100%; }
    .block-grid.tablet-two-up > li { width: 50%; }
    .block-grid.tablet-three-up > li { width: 33.33333%; }
    .block-grid.tablet-four-up > li { width: 25%; }
    .block-grid.tablet-five-up > li { width: 20%; }
    .block-grid.tablet-six-up > li { width: 16.66667%; }
    .block-grid.tablet-seven-up > li { width: 14.28571%; }
    .block-grid.tablet-eight-up > li { width: 12.5%; }
    
    /* Clear floating for block grid items */
    .block-grid.tablet-two-up > li:nth-child(2n+1) { clear: both; }
    .block-grid.tablet-three-up > li:nth-child(3n+1) { clear: both; }
    .block-grid.tablet-four-up > li:nth-child(4n+1) { clear: both; }
    .block-grid.tablet-five-up > li:nth-child(5n+1) { clear: both; }
    .block-grid.tablet-six-up > li:nth-child(6n+1) { clear: both; }
    .block-grid.tablet-seven-up > li:nth-child(7n+1) { clear: both; }
    .block-grid.tablet-eight-up > li:nth-child(8n+1) { clear: both; }
  }
  
  /* 
   * Note: We've removed the small-tablet breakpoint as it would conflict with
   * Foundation 3's existing mobile breakpoint at max-width: 767px
   * 
   * Instead, you can use the Foundation mobile-* classes for screens under 767px
   * and the tablet-* classes for screens between 768px and 1023px
   */
  
  /* Helper classes for responsive text alignment */
  @media only screen and (min-width: 768px) and (max-width: 1023px) {
    .tablet-text-left { text-align: left !important; }
    .tablet-text-right { text-align: right !important; }
    .tablet-text-center { text-align: center !important; }
    .tablet-text-justify { text-align: justify !important; }
  }
  
  /* Small tablet text alignment classes removed to avoid conflict with Foundation 3's mobile breakpoint */