/* ================================================
   GALLERY PAGE
   ================================================
   Header / navbar / hamburger styles are already
   provided by style.css (loaded before this file).
   Everything below is specific to gallery.html.
   ================================================ */

.gallery-page {
    max-width: 1440px;
    margin:    0 auto;
    padding:   64px 48px 120px;
    font-family: 'Jost', sans-serif;
}


/* ------------------------------------------------
   Page heading — mirrors the homepage's section
   title / about-eyebrow treatment for visual parity
   ------------------------------------------------ */
.gallery-heading {
    text-align:    center;
    max-width:     640px;
    margin:        0 auto 56px;
}

.gallery-eyebrow {
    display:        block;
    font-family:    var(--font-display);
    font-size:      11px;
    font-weight:    600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color:          #9a7218;
    margin-bottom:  18px;
}

.gallery-title {
    font-family:   var(--font-serif);
    font-size:     clamp(38px, 4.2vw, 58px);
    font-weight:   500;
    font-style:    italic;
    color:         #1a1614;
    line-height:   1.05;
    margin-bottom: 18px;
}

.gallery-subtitle {
    font-family: var(--font-serif);
    font-size:   17px;
    font-weight: 300;
    line-height: 1.7;
    color:       #6b6259;
}


/* ------------------------------------------------
   Toolbar
   ------------------------------------------------ */
.gallery-toolbar {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    gap:              20px;
    margin-bottom:    18px;
    padding-bottom:   24px;
    border-bottom:    1px solid #e8e4df;
}

.filter-btn {
    display:          flex;
    align-items:      center;
    gap:              10px;
    background:       white;
    border:           1px solid #ddd;
    padding:          11px 22px;
    font-family:      var(--font-display);
    font-size:        12px;
    font-weight:      500;
    letter-spacing:   0.08em;
    text-transform:   uppercase;
    color:            #2c2c2c;
    cursor:           pointer;
    transition:       border-color var(--transition-fast), color var(--transition-fast);
}

.filter-btn-icon {
    display: flex;
    align-items: center;
}

.filter-btn-icon svg {
    width:  15px;
    height: 15px;
}

.filter-btn:hover,
.filter-btn[aria-expanded="true"] {
    border-color: #787e9f;
    color:        #787e9f;
}

.gallery-view-icons {
    display: flex;
    gap:     6px;
}

.view-btn-icon {
    display:          flex;
    align-items:      center;
    justify-content:  center;
    width:            38px;
    height:           38px;
    background:       transparent;
    border:           1px solid transparent;
    border-radius:    3px;
    color:            #9a958c;
    cursor:           pointer;
    transition:       color var(--transition-fast), border-color var(--transition-fast), background-color var(--transition-fast);
}

.view-btn-icon svg {
    width:  17px;
    height: 17px;
}

.view-btn-icon:hover {
    color: #2c2c2c;
}

.view-btn-icon.is-active {
    color:        #787e9f;
    border-color: #d8d4e4;
    background:   #f4f3f8;
}

.gallery-toolbar select {
    padding:        10px 16px;
    border:         1px solid #ddd;
    background:     white;
    font-family:    'Jost', sans-serif;
    font-size:      13px;
    color:          #2c2c2c;
    cursor:         pointer;
}


/* ------------------------------------------------
   Filter panel (toggled by the Filters button)
   ------------------------------------------------ */
.filter-panel {
    display:         flex;
    flex-wrap:       wrap;
    align-items:     center;
    gap:             22px;
    background:      #f7f6f3;
    border:          1px solid #e8e4df;
    padding:         20px 24px;
    margin-bottom:   40px;
}

/* Author rules with equal specificity to [hidden] would otherwise win
   over the browser's default "[hidden] { display:none }" rule, so the
   panel would show even while the hidden attribute is set. */
.filter-panel[hidden] {
    display: none;
}

.filter-panel-label {
    font-family:    var(--font-display);
    font-size:      11px;
    font-weight:    600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color:          #9a958c;
}

.filter-panel-options {
    display:  flex;
    flex-wrap: wrap;
    gap:      18px 26px;
    flex:     1 1 auto;
}

.filter-option {
    display:     flex;
    align-items: center;
    gap:         8px;
    font-size:   14px;
    color:       #2c2c2c;
    cursor:      pointer;
}

.filter-option input {
    accent-color: #787e9f;
    width:        15px;
    height:       15px;
    cursor:       pointer;
}

.filter-reset {
    background:       none;
    border:           none;
    font-family:      var(--font-display);
    font-size:        11px;
    font-weight:      600;
    letter-spacing:   0.12em;
    text-transform:   uppercase;
    color:            #b5794f;
    cursor:           pointer;
    text-decoration:  underline;
    text-underline-offset: 3px;
}

.filter-reset:hover {
    color: #8a5c38;
}


/* ------------------------------------------------
   Grid — default view (grid-3, compact)
   ------------------------------------------------ */
.gallery-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   32px;
}

.gallery-grid.is-grid-2 {
    grid-template-columns: repeat(2, 1fr);
    gap:                   40px;
}

.gallery-grid.is-list {
    grid-template-columns: 1fr;
    gap:                   18px;
}


/* ------------------------------------------------
   Card
   ------------------------------------------------ */
.gallery-card {
    position:      relative;
    background:    white;
    border-radius: 14px;
    overflow:      hidden;
    border:        1px solid #ece7df;
    box-shadow:    0 1px 3px rgba(30, 24, 15, 0.05);
    transition:    transform var(--transition-default), box-shadow var(--transition-default);
}

.gallery-card:hover {
    transform:  translateY(-5px);
    box-shadow: 0 20px 40px rgba(30, 24, 15, 0.12);
}

.gallery-card img {
    width:       100%;
    aspect-ratio: 1;
    object-fit:  cover;
    display:     block;
}

.gallery-info {
    background:     #fbfaf7;
    padding:        20px 22px 22px;
    display:        flex;
    flex-direction: column;
}

.card-top h3 {
    font-family: var(--font-serif);
    font-size:   23px;
    font-weight: 500;
    line-height: 1.2;
    color:       #211d19;
    padding-right: 42px; /* keep clear of the heart button overlaid above */
}

/* Overlaid on the top-right corner of the photo, not inline with the title */
.heart {
    position:         absolute;
    top:              14px;
    right:            14px;
    z-index:          2;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    width:            36px;
    height:           36px;
    border-radius:    50%;
    background:       rgba(255, 255, 255, 0.92);
    box-shadow:       0 2px 8px rgba(0, 0, 0, 0.14);
    font-size:        17px;
    line-height:      1;
    color:            #9a958c;
    transition:       color var(--transition-fast), transform var(--transition-fast);
}

.heart:hover {
    color:     #cf5a6d;
    transform: scale(1.08);
}

.artist {
    color:          #a9773f;
    font-size:      11px;
    font-weight:    600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin:         8px 0 0;
}

.card-bottom {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    margin-top:      16px;
    padding-top:     16px;
    border-top:      1px solid #ece7df;
}

.price {
    font-family: var(--font-display);
    font-size:   16px;
    font-weight: 600;
    color:       #211d19;
}

.view-btn {
    text-decoration: none;
    padding:         9px 20px;
    border-radius:   999px;
    background:      #787e9f;
    color:           white;
    font-family:     var(--font-display);
    font-size:       11px;
    font-weight:     500;
    letter-spacing:  0.08em;
    text-transform:  uppercase;
    transition:      background-color var(--transition-fast);
}

.view-btn:hover {
    background: #5f6587;
}

/* Empty state when a filter combination matches nothing */
.gallery-empty {
    text-align:  center;
    padding:     60px 20px;
    font-family: var(--font-serif);
    font-style:  italic;
    font-size:   18px;
    color:       #9a958c;
}


/* ------------------------------------------------
   List view — image left, info right
   ------------------------------------------------ */
.gallery-grid.is-list .gallery-card {
    display:     flex;
    align-items: stretch;
}

.gallery-grid.is-list .gallery-card img {
    width:        240px;
    flex:         0 0 240px;
    aspect-ratio: 1;
    height:       auto;
}

.gallery-grid.is-list .gallery-info {
    flex:      1 1 auto;
    min-height: 0;
}

/* In list view the card is a wide row, so the heart's usual photo-overlay
   position (top-right of the whole card) would float over the text
   column instead of the image — revert it to a plain inline icon
   beside the title instead. */
.gallery-grid.is-list .card-top {
    display:         flex;
    align-items:     flex-start;
    justify-content: space-between;
    gap:             10px;
}

.gallery-grid.is-list .card-top h3 {
    padding-right: 0;
}

.gallery-grid.is-list .heart {
    position:   static;
    width:      auto;
    height:     auto;
    background: none;
    box-shadow: none;
    flex-shrink: 0;
}


/* ================================================
   GALLERY — RESPONSIVE
   Breakpoints match style.css (1024 / 768 / 480 / 375)
   ================================================ */

/* 1024px — tablet */
@media (max-width: 1024px) {
    .gallery-page {
        padding: 56px 32px 96px;
    }

    .gallery-grid,
    .gallery-grid.is-grid-2 {
        grid-template-columns: repeat(2, 1fr);
        gap: 28px;
    }
}

/* 768px — tablet portrait */
@media (max-width: 768px) {
    .gallery-page {
        padding: 48px 24px 80px;
    }

    .gallery-heading {
        margin-bottom: 40px;
    }

    .gallery-toolbar {
        flex-wrap: wrap;
        row-gap:   16px;
    }

    .gallery-toolbar select {
        order:    3;
        flex:     1 1 100%;
    }

    .filter-panel {
        flex-direction: column;
        align-items:    flex-start;
    }

    .gallery-grid,
    .gallery-grid.is-grid-2 {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .gallery-grid.is-list .gallery-card {
        flex-direction: column;
    }

    .gallery-grid.is-list .gallery-card img {
        width:  100%;
        flex:   0 0 auto;
        aspect-ratio: 4 / 3;
    }
}

/* 480px — mobile */
@media (max-width: 480px) {
    .gallery-page {
        padding: 40px 18px 64px;
    }

    .gallery-eyebrow {
        font-size: 10px;
    }

    .gallery-subtitle {
        font-size: 15.5px;
    }

    .gallery-toolbar {
        gap: 12px;
    }

    .filter-btn {
        padding:   10px 16px;
        font-size: 11px;
    }

    .view-btn-icon {
        width:  34px;
        height: 34px;
    }

    .gallery-grid,
    .gallery-grid.is-grid-2 {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .card-top h3 {
        font-size: 22px;
    }

    .gallery-info {
        padding: 16px 18px 18px;
    }
}

/* 375px — small mobile */
@media (max-width: 375px) {
    .gallery-toolbar {
        flex-direction: column;
        align-items:    stretch;
    }

    .gallery-view-icons {
        justify-content: center;
    }
}


/* ================================================
   FOOTER — Maison de Poterie
   ================================================ */
.site-footer {
  margin-top: 120px;
  background-color: #787e9f;
  color: #d8d5e6;
  font-family: 'Jost', sans-serif;
  padding: 64px 60px 0;
}

.footer-inner {
  max-width: 1240px;
  margin: 0 auto;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr 0.8fr 1fr;
  gap: 40px;
  padding-bottom: 56px;
}

/* ---- Brand column ---- */
.footer-logo {
  font-family: 'Cormorant Garamond', serif;
  line-height: 1.05;
  margin-bottom: 18px;
}

.footer-logo .logo-script {
  display: block;
  font-style: italic;
  font-weight: 500;
  font-size: 17px;
  color: #ffffff;
}

.footer-logo .logo-main {
  display: block;
  font-weight: 500;
  font-size: 26px;
  color: #ffffff;
  letter-spacing: 0.5px;
}

.footer-tagline {
  font-size: 13px;
  line-height: 1.7;
  color: #c7c3da;
  max-width: 230px;
  margin-bottom: 22px;
}

.footer-social {
  display: flex;
  gap: 14px;
}

.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid #6a6790;
  border-radius: 50%;
  color: #d8d5e6;
  text-decoration: none;
  transition: border-color 0.25s ease, color 0.25s ease, background-color 0.25s ease;
}

.footer-social a:hover {
  border-color: #d98a5a;
  background-color: #d98a5a;
  color: #4b4870;
}

.footer-social svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

/* ---- Link columns ---- */
.footer-col-title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: #f5f1ec;
  text-transform: uppercase;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid #6a6790;
}

.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.footer-links a {
  font-size: 13.5px;
  color: #c7c3da;
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-links a:hover {
  color: #d98a5a;
}

/* ---- Contact column ---- */
.footer-contact-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 13px;
  margin-bottom: 26px;
}

.footer-contact-list li {
  font-size: 13.5px;
  color: #c7c3da;
}

.footer-contact-list a {
  color: #c7c3da;
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-contact-list a:hover {
  color: #d98a5a;
}

.footer-newsletter-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: #f5f1ec;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.footer-newsletter-form {
  display: flex;
  max-width: 240px;
}

.footer-newsletter-form input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 1px solid #6a6790;
  border-right: none;
  color: #f5f1ec;
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  padding: 10px 14px;
  outline: none;
}

.footer-newsletter-form input::placeholder {
  color: #9d99b8;
}

.footer-newsletter-form input:focus {
  border-color: #d98a5a;
}

.footer-newsletter-form button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  border: none;
  background-color: #ffffff;
  color: #000000;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.footer-newsletter-form button:hover {
  background-color: #e8e8e8;
}

.footer-newsletter-form button svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

/* ---- Bottom bar ---- */
.footer-bottom {
  border-top: 1px solid #605d84;
  padding: 22px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.footer-copyright {
  font-size: 12px;
  color: #a9a5c4;
}

.footer-legal {
  display: flex;
  gap: 24px;
}

.footer-legal a {
  font-size: 12px;
  color: #a9a5c4;
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-legal a:hover {
  color: #d98a5a;
}

/* ================================================
   FOOTER — RESPONSIVE
   ================================================ */
@media (max-width: 900px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    row-gap: 40px;
  }
}

@media (max-width: 560px) {
  .site-footer { padding: 48px 24px 0; }
  .footer-grid { grid-template-columns: 1fr; gap: 36px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}