/* ===========================================================
   Tekfleet_CategoryDesign - Corrected styles
   Matches actual markup output by view.phtml + inquiry_form.phtml
   Reference: Art Alive Gallery PDF (Paresh Maity artist page)
   =========================================================== */

/* ---------- Banner layout ---------- */
.category-banner-image {
    width: 100%;
    height: 320px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
    position: relative;
}
.category-banner-title {
    color: #fff;
    background: rgba(0, 0, 0, 0.45);
    padding: 10px 30px;
    font-size: 32px;
    margin: 0;
}

/* ---------- Category description (fallback layout) ---------- */
.category-description {
    max-width: 760px;
    margin: 0 auto 30px;
    text-align: center;
    color: #444;
    font-size: 15px;
    line-height: 1.6;
}

/* ---------- Gallery layout ("NEW WORKS" heading) ---------- */
.gallery-section-heading {
    text-align: center;
    letter-spacing: 2px;
    font-size: 16px;
    color: #555;
    margin: 30px 0;
    text-transform: uppercase;
    font-weight: 600;
}

/* Product grid FIX: was targeting .category-design-grid,
   but view.phtml actually outputs .category-design-gallery.
   This makes the "NEW WORKS" grid match the 4-column PDF layout. */
.category-design-gallery .products-grid .product-items,
.category-design-grid .products-grid .product-items {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px 20px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.category-design-gallery .products-grid .product-item,
.category-design-grid .products-grid .product-item {
    width: 100%;
    margin: 0;
}
.category-design-gallery .product-item-photo,
.category-design-grid .product-item-photo {
    display: block;
    background: #f5f5f5;
}
.category-design-gallery .product-item-photo img,
.category-design-grid .product-item-photo img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}
.category-design-gallery .product-item-photo:hover img,
.category-design-grid .product-item-photo:hover img {
    transform: scale(1.03);
}
.category-design-gallery .product-item-name,
.category-design-grid .product-item-name {
    font-size: 13px;
    font-weight: 600;
    margin-top: 10px;
}
.category-design-gallery .product-item-name a,
.category-design-grid .product-item-name a {
    color: #2b2b2b;
    text-decoration: none;
}
.category-design-gallery .product-item-name a:hover,
.category-design-grid .product-item-name a:hover {
    color: #e2622a;
}
.category-design-gallery .price-box,
.category-design-grid .price-box {
    font-size: 12px;
    color: #6b6b6b;
}

/* FIX: Magento sets an inline "width:Xpx" style on .product-image-container
   via PHP (based on image resize settings). This conflicts with our
   grid-template-columns: repeat(4, 1fr) layout — the image stays at its
   fixed pixel width while the grid column stretches much wider, causing
   the large empty gaps seen between grid items. !important is required
   because inline styles otherwise win over external stylesheets. */
.category-design-gallery .products-grid .product-image-container,
.category-design-grid .products-grid .product-image-container {
    width: 100% !important;
    max-width: 100% !important;
}
.category-design-gallery .products-grid .product-image-wrapper,
.category-design-grid .products-grid .product-image-wrapper {
    width: 100% !important;
}
.category-design-gallery .products-grid .product-image-photo,
.category-design-grid .products-grid .product-image-photo {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}

/* Constrain the overall page width — screenshot shows the layout
   stretching full browser width with no max-width, which is why the
   grid columns became so wide in the first place. */
.category-view.category-design-gallery {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

/* ---------- List layout (kept as-is, minor cleanup) ---------- */
.category-design-list .products-grid .product-item {
    display: block;
    width: 100%;
}
.category-design-list .products-grid .product-item-info {
    display: flex;
    align-items: center;
    gap: 20px;
    border-bottom: 1px solid #e0e0e0;
    padding: 15px 0;
}

/* ---------- Optional hero header/image (used by theme's own
   category name/description/image blocks, if styled with these
   classes elsewhere) ---------- */
.gallery-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 30px;
}
.gallery-title {
    color: #e2622a;
    font-size: 34px;
    margin-bottom: 10px;
}
.gallery-subtitle {
    color: #444;
    font-size: 15px;
    line-height: 1.5;
}
.gallery-hero-image {
    position: relative;
    margin-bottom: 30px;
}
.gallery-hero-image img {
    width: 100%;
    height: auto;
    display: block;
}
.gallery-hero-caption {
    display: block;
    font-size: 12px;
    color: #888;
    text-align: right;
    margin-top: 6px;
}

/* ===========================================================
   ENQUIRY FORM — rebuilt to match PDF: full-width grey panel,
   left intro text | divider | form, label-left/input-right rows
   =========================================================== */
.category-inquiry-form-wrapper {
    max-width: none;
    width: 100%;
    margin: 40px 0 0;
    padding: 40px 30px;
    border: none;
    border-radius: 0;
    background: #ededed;
    box-sizing: border-box;
    /* Grid: label column | 1px divider | form column.
       h3 and .messages span both columns; .enquiry-intro sits in
       column 1, form sits in column 2 — no extra markup needed,
       matches the existing inquiry_form.phtml structure as-is. */
    display: grid;
    grid-template-columns: 240px 1fr;
    column-gap: 30px;
    row-gap: 0;
}
.category-inquiry-form-wrapper h3 {
    grid-column: 1 / -1;
    text-align: center;
    font-size: 15px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 600;
    margin: 0 0 30px;
}
.category-inquiry-form-wrapper .messages {
    grid-column: 1 / -1;
    margin: 0 0 20px;
}
.category-inquiry-form-wrapper .messages .message {
    font-size: 13px;
    padding: 10px 15px;
    border-radius: 2px;
}

/* two-column body: intro text (col 1) | form (col 2, divider via border-left) */
.category-inquiry-form-wrapper .enquiry-intro {
    grid-column: 1;
    font-size: 14px;
    color: #2b2b2b;
    line-height: 1.6;
}
.category-inquiry-form-wrapper form {
    grid-column: 2;
    width: 100%;
    border-left: 1px solid #d5d5d5;
    padding-left: 30px;
}

.category-inquiry-form-wrapper .field {
    display: grid;
    grid-template-columns: 130px 1fr;
    align-items: center;
    column-gap: 15px;
    margin-bottom: 15px;
}
.category-inquiry-form-wrapper .field > label {
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 0;
}
.category-inquiry-form-wrapper .field.message,
.category-inquiry-form-wrapper .field.related-interests {
    align-items: flex-start;
}
.category-inquiry-form-wrapper .field.message label,
.category-inquiry-form-wrapper .field.related-interests label {
    padding-top: 8px;
}

.category-inquiry-form-wrapper input[type="text"],
.category-inquiry-form-wrapper input[type="email"],
.category-inquiry-form-wrapper input[type="tel"],
.category-inquiry-form-wrapper select,
.category-inquiry-form-wrapper textarea {
    flex: 1;
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 2px;
    background: #fff;
    box-sizing: border-box;
    font-size: 13px;
}
.category-inquiry-form-wrapper textarea {
    min-height: 40px;
}

.category-inquiry-form-wrapper .phone-row {
    display: flex;
    gap: 10px;
    flex: 1;
}
.category-inquiry-form-wrapper .phone-row select {
    flex: 0 0 130px;
}
.category-inquiry-form-wrapper .phone-row input {
    flex: 1;
}

.category-inquiry-form-wrapper .field.subscribe {
    display: block;
}
.category-inquiry-form-wrapper .subscribe-label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
}
.category-inquiry-form-wrapper .radio-inline {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-right: 15px;
    font-weight: normal;
    font-size: 13px;
}

.category-inquiry-form-wrapper .actions-toolbar {
    margin-left: 145px;
}
.category-inquiry-form-wrapper .action.submit.primary {
    background: #e2622a;
    color: #fff;
    border: none;
    padding: 12px 40px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    cursor: pointer;
    border-radius: 2px;
}
.category-inquiry-form-wrapper .action.submit.primary:hover {
    background: #c9531f;
}

.category-inquiry-form-wrapper .privacy-note {
    margin-left: 145px;
    font-size: 11px;
    color: #888;
    margin-top: 15px;
}

/* ---------- Responsive ---------- */
@media (max-width: 992px) {
    .category-design-gallery .products-grid .product-items,
    .category-design-grid .products-grid .product-items {
        grid-template-columns: repeat(2, 1fr);
    }
    .category-inquiry-form-wrapper {
        grid-template-columns: 1fr;
    }
    .category-inquiry-form-wrapper .enquiry-intro {
        grid-column: 1;
        border-bottom: 1px solid #d5d5d5;
        padding-bottom: 20px;
        margin-bottom: 20px;
    }
    .category-inquiry-form-wrapper form {
        grid-column: 1;
        border-left: none;
        padding-left: 0;
    }
    .category-inquiry-form-wrapper .field {
        grid-template-columns: 1fr;
        row-gap: 6px;
    }
    .category-inquiry-form-wrapper .actions-toolbar,
    .category-inquiry-form-wrapper .privacy-note {
        margin-left: 0;
    }
}

@media (max-width: 480px) {
    .category-design-gallery .products-grid .product-items,
    .category-design-grid .products-grid .product-items {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px 12px;
    }
    .gallery-title {
        font-size: 26px;
    }
}